在开发过程中我们会使用ifram来嵌入一个页面或者通过window.open打开一个新的窗口，这两个窗口之间有时候需要通信，下面我们看下具体会有哪些情况。

不同窗口之间通信有两种情况：

ifram：与通过ifram标签打开的窗口通信

window.open：与window.open打开的窗口通信

这两种情况又分为了同域下的窗口通信和不同域下的通信

同域下的窗口通信

ifram

  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  5. <title>无标题文档</title>
  6. <script>
  7. // 通过js可以访问被包含页面的DOM元素
  8. window.onload = function() {
  9.     var oBtn = document.getElementById('btn');
  10.     var oMyIframe = document.getElementById('myframe');
  11.     oBtn.onclick = function() {
  12.         // 如果我们要操作一个iframe里面的dom元素，需要通过 contentWindow 获取到iframe引入的页面的window对象
  13.         oMyIframe.contentWindow.document.body.style.background = 'red';
  14.     }
  15. }
  16. </script>
  17. </head>
  18. <body>
  19.     <input type="button" value="点击我，改变2.iframe.html的背景色" id="btn" />
  20.     <iframe id="myframe" src="2.iframe.html"></iframe>
  21. </body>
  22. </html>
  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  5. <title>无标题文档</title>
  6. <script>
  7. window.onload = function() {
  8.     var oBtn = document.getElementById('btn');
  9.         /*
  10.             window : 当前窗口 
  11.             parent : 父级窗口
  12.             top : 顶级窗口
  13.         */
  14.     oBtn.onclick = function() {
  15.         //parent => window 如果当前页面是顶级，没有被其他页面所包含，那么parent就是当前页面的window对象，那么如果被包含了，则parent就是包含当前页面的父级页面的window对象
  16.         parent.document.body.style.background = 'green';
  17.     }
  18. }
  19. </script>
  20. </head>
  22. <body>
  23.         这里是2.iframe.html页面
  24.     <input type="button" value="点击我，改变1.iframe.html的背景色" id="btn" />
  25. </body>
  26. </html>

window.open

  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  5. <title>无标题文档</title>
  6. <script>
  7. window.onload = function() {
  9.     var oBtn = document.getElementById('btn');
  10.     var oBtn2 = document.getElementById('btn2');
  11.     var newWindow = null;
  13.     oBtn.onclick = function() {
  14.         //window.open 返回被打开窗口的window对象
  15.         newWindow = window.open('2.window.open.html', '_blank');
  16.     }
  18.     oBtn2.onclick = function() {
  19.         newWindow.document.body.style.background = 'red';
  20.     }
  21. }
  22. </script>
  23. </head>
  25. <body>
  26.     <input type="button" value="点击我，开启一个新的窗口打开2.window.open.html页面" id="btn" />
  27.   <input type="button" value="点击我，改变2.window.open.html页面的背景色" id="btn2" />
  28. </body>
  29. </html>
  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  5. <title>无标题文档</title>
  6. <script>
  7. window.onload = function() {
  8.     var oBtn = document.getElementById('btn');
  9.     oBtn.onclick = function() {
  10.         //window.opener : 通过window.open方法打开当前页面的窗口的window对象
  11.         window.opener.document.body.style.background = 'green';
  12.     }
  13. }
  14. </script>
  15. </head>
  17. <body>
  18.     这是4.window.open.html页面
  19.   <input type="button" value="点击我，改变1.window.open.html页面的背景色" id="btn" />
  20. </body>
  21. </html>

不同域下的窗口通信（跨文档通信）

问题：跨域之后之前同域下的操作都失效了，会产生跨域安全限制问题

解决：postMessage方法，通过这个方法给另外一个窗口发送信息 （注意：接收消息的窗口的window对象调用postMessage方法）

a域名

  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  5. <title>无标题文档</title>
  6. <script>
  7. window.onload = function() {
  9.     var oBtn = document.getElementById('btn')
  10.     var oMyIframe = document.getElementById('myframe')
  12.     /*
  13.         postMessage : 可以通过这个方法给另外一个窗口发送信息
  15.         注意：接收消息的窗口的window对象调用postMessage方法
  16.     */
  18.     oBtn.onclick = function() {
  19.         /*
  20.             第一个参数：发送的数据
  21.             第二个参数：接收数据的域名｛带上协议｝
  22.         */
  23.         oMyIframe.contentWindow.postMessage('1', 'http://www.b.com')
  24.     }
  26. }
  27. </script>
  28. </head>
  30. <body>
  31.     <input type="button" value="点击我，www.b.com域名下postMessage.html的背景色" id="btn" />
  32.     <iframe id="myframe" src="http://www.b.com/postMessage.html"></iframe>
  33. </body>
  34. </html>

b域名

  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  5. <title>无标题文档</title>
  6. <script>
  7. window.onload = function() {
  9.     // message事件 : 当窗口接收到通过postMessage发送过来的数据的时候触发
  11.     window.addEventListener('message', function(ev) {
  12.         /*
  13.             message事件的事件对象下保存了发送过来的内容
  14.             ev.data: 发送过来的数据
  15.             ev.origin: 发送消息的域名
  16.         */
  17.         if (ev.data == '1') {
  18.             document.body.style.background = 'red';
  19.         }
  20.     }, false);
  21. }
  22. </script>
  23. </head>
  25. <body>
  26.     这是b.com的postMessage.html页面
  27. </body>
  28. </html>