html5 Postmessage解決跨域問題

時間 2019-11-10 標籤 html5 html 5 postmessage 解決跨域問題

在 Cross-document messaging 中使用 postMessage 和 onmessage

爲了實現不一樣域之間的通訊，須要在操做系統的 hosts 文件添加兩個域名，進行模擬。html

清單 3. hosts 文件中添加兩個不一樣的域名

 127.0.0.1 	 parent.com 
 127.0.0.1 	 child.com

在父網頁中經過 iframe 嵌入子頁面，並在 JavaScript 代碼中調用 postMessage 方法發送數據到子窗口。dom

清單 4. 父頁面中嵌入子頁面，調用 postMessage 方法發送數據

 <html> 
 <head> 
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
 <title>Test Cross-domain communication using HTML5</title> 
 <script type="text/JavaScript"> 
	 function sendIt(){ 
		 // 經過 postMessage 向子窗口發送數據
		 
	 } 
 </script> 
 </head> 
 <body> 
	 <!-- 經過 iframe 嵌入子頁面 --> 
	 <iframe src="http://child.com:8080/TestHTML5/other-domain.html" 
				 id="otherPage"></iframe> 
	 <br/><br/> 
	 <input type="text" id="message"><input type="button" 
			 value="Send to child.com" onclick="sendIt()" /> 
 </body> 
 </html>

在子窗口中監聽 onmessage 事件，並用 JavaScript 實現顯示父窗口發送過來的數據。post

清單 5. 子窗口中監聽 onmessage 事件，顯示父窗口發送來的數據

 <html> 
 <head> 
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
 <title>Web page from child.com</title> 
 <script type="text/JavaScript"> 
	 //event 參數中有 data 屬性，就是父窗口發送過來的數據
	 window.addEventListener("message", function( event ) { 
		 // 把父窗口發送過來的數據顯示在子窗口中
	   document.getElementById("content").innerHTML+=event.data+"<br/>"; 
	 }, false ); 

 </script> 
 </head> 
 <body> 
	 Web page from http://child.com:8080 
	 <div id="content"></div> 
 </body> 
 </html>

上班後，試試可行否。ui