标签：
窗口间的通信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>
标签：
原文地址：http://www.cnblogs.com/yanwen2015/p/4947520.html
