一般窗口通信分為三種：
- 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>