html5特性

時間 2019-11-12

標籤 html5 html 特性欄目 HTML5 简体版

原文原文鏈接

窗口間的通訊A頁面php

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>無標題文檔</title>
<script>
window.onload = function() {
    var oBtn = document.getElementById('btn');
    var oMyIframe = document.getElementById('myframe');
    /*
        postMessage : 能夠經過這個方法給另一個窗口發送信息
        接收消息的窗口的window對象.postMessage();
    */
    
    oBtn.onclick = function() {
        //當本頁面和包含頁面不在同一個域名下的時候，這樣操做就會有跨域操做安全限制問題。
        //oMyIframe.contentWindow.document.body.style.background = 'red';
        /*
        第一個參數：發送的數據
        第二個參數：接收數據的域名｛帶上協議｝
        */ //父級引用子級是用contentWindow
        oMyIframe.contentWindow.postMessage('1', 'http://www.b.com');
        //alert(oMyIframe.contentWindow.postMessage)   
    }
}
</script>
</head>

<body>
    <input type="button" value="點擊我，改變2.iframe.html的背景色" id="btn" />
    <iframe id="myframe" src="http://www.b.com/3.postMessage.html"></iframe>
</body>
</html>

B頁面html

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>無標題文檔</title>
<script>
window.onload = function() {
    
    /*
    message : 當窗口接收到經過postMessage發送過來的數據的時候觸發
    */
    
    window.addEventListener('message', function(ev) {
        //alert('b.com下的頁面接收到了內容了');
        
        //message事件的事件對象下保存了發送過來的內容
        //ev.data : 發送過來的數據
        //ev.origin : 哪一個域發過來的
        
        //alert('我接收到了a.com頁面發送過來的數據，內容是：' + ev.data);
        
        //alert(ev.origin); 
        
        
        if (ev.data == '1') {
            document.body.style.background = 'red';
        }
        
    }, false);
    
}
</script>
</head>

<body>
    這是b.com的postMessage.html頁面
</body>
</html>

上面是父級操做子級，下面是子級操做父級ajax

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>無標題文檔</title>
<script>
window.onload = function() {
    var oBtn = document.getElementById('btn');
    oBtn.onclick = function() {
  //parent => window 若是當前頁面是頂級，沒有被其餘頁面所包含，那麼parent就是當前頁面的window對象，那麼若是被包含了，則parent就是包含當前頁面的父級頁面的window對象
        parent.document.body.style.background = 'green';
        
    }
    
    /*
    window : 當前窗口 
    parent : 父級窗口
    top : 頂級窗口
    */
}
</script>
</head>

<body>
    這裏是a.com下的2.iframe.html頁面
    <input type="button" value="點擊我，改變1.iframe.html的背景色" id="btn" />
</body>
</html>

ajax跨域請求後端

ie下跨域

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>無標題文檔</title>
<script>
window.onload = function() {
    
    /*
    在標準瀏覽器下，XMLHttpRequest對象已是升級版本，支持了更多的特性，能夠跨域了
    可是，若是想實現跨域請求，還須要後端的相關配合才能夠
    
    XMLHttpRequest : 增長不少功能，他也不推薦使用onreadystatechange這個事件來監聽，推薦使用onload
    
    XDomainRequest : IE若是想實現跨域請求，則須要使用另一個對象去實現
    */
    var oBtn = document.getElementById('btn');
    
    oBtn.onclick = function() {
        
        /*var xhr = new XMLHttpRequest();
        xhr.onreadystatechange = function() {
            if (xhr.readyState == 4) {
                if (xhr.status == 200) {
                    alert(xhr.responseText);
                }
            }
        }
        xhr.open('get', 'http://www.b.com/ajax.php', true);
        xhr.send();*/
        
        var oXDomainRequest = new XDomainRequest();
        oXDomainRequest.onload = function() {
            alert(this.responseText);
        }
        oXDomainRequest.open('get', 'http://www.b.com/ajax.php', true);
        oXDomainRequest.send();
        
    }
    
}
</script>
</head>

<body>
    <input type="button" value="獲取同域下內容" id="btn" />
</body>
</html>

ajax無刷新上傳瀏覽器

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>無標題文檔</title>
<style>
#div1 {width: 300px; height: 30px; border: 1px solid #000; position: relative;}
#div2 {width: 0; height: 30px; background: #CCC;}
#div3 {width: 300px; height: 30px; line-height: 30px; text-align: center; position: absolute; left: 0; top: 0;}
</style>
<script>
window.onload = function() {
    
    var oBtn = document.getElementById('btn');
    var oMyFile = document.getElementById('myFile');
    var oDiv1 = document.getElementById('div1');
    var oDiv2 = document.getElementById('div2');
    var oDiv3 = document.getElementById('div3');
    
    oBtn.onclick = function() {
        //alert(oMyFile.value);    //獲取到的是file控件的value值，這個內容是顯示給你看的文字，不是咱們選擇的文件
        //oMyFile.files file控件中選擇的文件列表對象
        //alert(oMyFile.files);
        //咱們是要經過ajax把oMyFile.files[0]數據發送給後端
        /*for (var attr in oMyFile.files[0]) {
            console.log( attr + ' : ' + oMyFile.files[0][attr] );
        }*/
        //一、上傳功能
        var xhr = new XMLHttpRequest();        xhr.onload = function() {
            //alert(1);
            //var d = JSON.parse(this.responseText);
            //alert(d.msg + ' : ' + d.url);
            alert('OK,上傳完成');
        }
        xhr.open('post', 'post_file.php', true);
        //用post上傳要寫這個請求頭信息
        xhr.setRequestHeader('X-Request-With', 'XMLHttpRequest');
        var oFormData = new FormData();    //經過FormData來構建提交數據，是經過二進制上傳
        oFormData.append('file', oMyFile.files[0]);
        xhr.send(oFormData);

        //二、進度條

//alert(xhr.upload);
var oUpload = xhr.upload;
//alert(oUpload);
oUpload.onprogress = function(ev) {
console.log(ev.total + ' : ' + ev.loaded);
var iScale = ev.loaded / ev.total;
oDiv2.style.width = 300 * iScale + 'px';
oDiv3.innerHTML = iScale * 100 + '%';
}安全

    }
}
</script>
</head>

<body>
    <input type="file" id="myFile" /><input type="button" id="btn" value="上傳" />
    <div id="div1">
        <div id="div2"></div>
        <div id="div3">0%</div>
    </div>

</body>
</html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。