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>