html5 窗口之间的通信

一般窗口通信分为三种：

iframe嵌套：多个iframe之间通信。

父页面操作子页面元素：oFrame.contentWindow.document.body。
父页面调用子页面方法：oFrame.contentWindow.functionName()。
子页面调用父页面元素：window.top/parent/window

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title></title>
 6     </head>
 7     <body>
 8         <iframe id="myFrame" src="Iframe2.html"></iframe><br />
 9         <input type="button" value="改变子窗口的背景色" id="btn1" />
10         <input type="button" value="调用子窗口的方法" id="btn2" />
11     </body>
12 </html>
13 <script type="text/javascript">
14     window.onload = function(){
15         var myFrame = document.getElementById("myFrame");
16         var oBtn1 = document.getElementById("btn1");
17         var oBtn2 = document.getElementById("btn2");
18         oBtn1.onclick = function(){
19             myFrame.contentWindow.document.body.style.background = "greenyellow";
20         }
21         oBtn2.onclick = function(){
22             myFrame.contentWindow.chlidWindowHandler();
23         }
24     }
25     function parentWindowHandler(){
26         alert("这是父窗口的方法，可以被子窗口调用");
27     }
28 </script>

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title></title>
 6     </head>
 7     <body>
 8         <h1>这是iframe2</h1>
 9         <input type="button" value="改变父窗口的背景色" id="btn1" />
10         <input type="button" value="调用父窗口的方法" id="btn2" />
11     </body>
12 </html>
13 <script type="text/javascript">
14     window.onload = function(){
15         var oBtn1 = document.getElementById("btn1");
16         var oBtn2 = document.getElementById("btn2");
17         oBtn1.onclick = function(){
18             window.top.document.body.style.background = "deepskyblue";
19             console.log(window.top);
20         }
21         oBtn2.onclick = function(){
22             window.top.parentWindowHandler();
23         }
24     }
25     function chlidWindowHandler(){
26         alert("这是子窗口的方法，可以被父窗口调用");
27     }
28 </script>

用window.open()方法打开一个新的窗口。

父页面操作子页面元素：window.open()打开子页面时，返回子页面窗口对象。
子页面操作父页面元素：window.opener即为父窗口对象。

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title></title>
 6         <style type="text/css">
 7             input{margin:10px;}
 8         </style>
 9     </head>
10     <body>
11         <input type="button" name="" id="btn1" value="打开一个新窗口" /><br />
12         <input type="button" name="" id="btn2" value="改变子窗口背景色" /><br />
13         <input type="button" name="" id="btn3" value="调用子窗口方法" />
14     </body>
15 </html>
16 <script type="text/javascript">
17     window.onload = function(){
18         var oBtn1 = document.getElementById("btn1");
19         var oBtn2 = document.getElementById("btn2");
20         var oBtn3 = document.getElementById("btn3");
21         
22         var childWin = null;
23         oBtn1.onclick = function(){
24             childWin = window.open("child.window.html","_blank");
25         }
26         oBtn2.onclick = function(){
27             //方法1
28             childWin.document.body.style.background = "greenyellow";
29         }
30         oBtn3.onclick = function(){
31             childWin.childWinHandler();
32         }
33     }
34     function parentWinHandler(){
35         alert("这是父窗口方法，可以被子窗口调用");
36     }
37 </script>

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title></title>
 6     </head>
 7     <body>
 8         <input type="button" name="" id="btn1" value="改变父窗口背景色" />
 9         <input type="button" name="" id="btn2" value="调用父窗口的方法" />
10     </body>
11 </html>
12 <script type="text/javascript">
13     window.onload = function(){
14         var oBtn1 = document.getElementById("btn1");
15         var oBtn2 = document.getElementById("btn2");
16         oBtn1.onclick = function(){
17             window.opener.document.body.style.background = "deepskyblue";
18         }
19         oBtn2.onclick = function(){
20             window.opener.parentWinHandler();
21         }
22     }
23     
24     function childWinHandler(){
25         alert("这是子窗口的事件，可以被父窗口调用");
26     }
27 </script>

html5t提供的postMessage方法和message事件。

postMessage():接收消息窗口对象.postMessage("发送的数据","接收的域"); 这里的域一定要带上协议
message事件：接收消息窗口监听message事件，事件对象中包含有origin属性和data属性。其中ev.origin可以获取发送数据的域，ev.data获取发送的具体数据。

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title></title>
 6     </head>
 7     <body>
 8         <iframe id="myFrame" src="http://localhost:63342/XChart/Iframe2.html" width="600px;"></iframe><br />
 9         <input type="button" value="向子窗口发送数据" id="btn" />
10     </body>
11 </html>
12 <script type="text/javascript">
13     window.onload = function(){
14         var myFrame = document.getElementById("myFrame");
15         var oBtn = document.getElementById("btn");
16         
17         oBtn.onclick = function(){
18             myFrame.contentWindow.postMessage("testData","http://localhost:63342");
19         }
20     }
21     function parentWindowHandler(){
22         alert("这是父窗口的方法，可以被子窗口调用");
23     }
24 </script>

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title></title>
 6     </head>
 7     <body>
 8         <p>http://localhost:63342/XChart/Iframe2.html</p>
 9     </body>
10 </html>
11 <script type="text/javascript">
12     window.onload = function(){
13         window.addEventListener("message",function(ev){
14             alert("父窗口向子窗口发送的数据是：" + ev.data);
15             alert("数据来源是：" + ev.origin);
16         })
17     }
18 
19 </script>

相关阅读:
slf4j日志框架绑定机制
 Btrace使用入门
 JVM反调调用优化，导致发生大量异常时log4j2线程阻塞
 [转载]Javassist 使用指南（三）
[转载]Javassist 使用指南（二）
[转载]Javassist 使用指南（一）
数组升序排序的方法Arrays.sort();的应用
 copyOfRange的应用
 copyOf数组复制方法的使用（数组扩容练习）
binarySearch(int[] a,int fromIndex,int toIndex, int key)的用法
原文地址：https://www.cnblogs.com/tengri/p/5565217.html