html5特性
窗口间的通信A页面
<!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页面
<!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>
上面是父级操作子级，下面是子级操作父级
<!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] ); }*/ //1、上传功能 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);
//2、进度条
//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>
