<address id="ttjl9"></address>
      <noframes id="ttjl9"><address id="ttjl9"><nobr id="ttjl9"></nobr></address>
      

      <form id="ttjl9"></form>
        <em id="ttjl9"><span id="ttjl9"></span></em>
        <address id="ttjl9"></address>

          <noframes id="ttjl9"><form id="ttjl9"></form>
          
  
      
    

          

	
          
		
          
			
          
				
          postMessage跨域、跨iframe窗口消息傳遞
          
				
           2021-3-18      前端達人      
          
			
          
			
          
				
          文章目錄
          

            

          1. 作用
            2. 

          2. 語法
            3. 

          3. 使用
            4. 

          4. 兼容性
            5. 

          5. 應用場景

            
說起postMessage 可能平時大家也不遇到，但是如果遇到問題了，又想不起它，這里記錄下防止后面忘記它。

            


            

            6. 

          6. 作用

            
window.postMessage()方法可以安全地實現Window對象之間的跨域通信。例如，在一個頁面和它生成的彈出窗口之間，或者是頁面和嵌入其中的iframe之間。

            


            
通常情況下，受瀏覽器“同源策略”的限制跨域問題一直是個問題，window.postMessage()提供了一個受控的機制來安全地規避這個限制（如果使用得當的話）。

            

            7. 

          7. 語法

            
一般來說，一個窗口可以獲得對另一個窗口的引用(例如，通過targetWindow=window.opener)，然后使用targetWindow.postMessage()在其上派發MessageEvent。接收窗口隨后可根據需要自行處理此事件，傳遞給window.postMessage()的參數通過事件對象暴露給接收窗口。

            


            
基本語法：

            


            
targetWindow.postMessage(message, targetOrigin, [transfer]);

            
1

            
targetWindow

            
targetWindow就是接收消息的窗口的引用。 獲得該引用的方法包括：

            


            
Window.open

            
Window.opener

            
HTMLIFrameElement.contentWindow

            
Window.parent

            
Window.frames +索引值

            
message

            
要發送到目標窗口的消息。 數據使用結構化克隆算法進行序列化。 這意味著我們可以將各種各樣的數據對象安全地傳遞到目標窗口，而無需自己對其進行序列化。

            


            
targetOrigin

            
定目標窗口的來源，必須與消息發送目標相一致，可以是字符串或URI。 表示任何目標窗口都可接收，為安全起見，請一定要明確提定接收方的URI。如果為"*"則都可以接收。

            


            
transfer

            
可選屬性。是一串和message同時傳遞的Transferable對象,這些對象的所有權將被轉移給消息的接收方,而發送一方將不再保有所有權。

            

            8. 

          8. 使用

            
postMessage程序

            


            
var receiver = document.getElementById('receiver').contentWindow;

            
var btn = document.getElementById('send');

            
btn.addEventListener('click', function (e) {

            
    e.preventDefault();

            
    var val = document.getElementById('text').value;

            
    receiver.postMessage("Hello "+val+"！", "http://www.xxx.com");

            
}); 

            


            
接收端

            


            
window.addEventListener("message", receiveMessage, false);

            
function receiveMessage(event){

            
  if (event.origin !== "http://www.xxx.com")

            
    return;

            
}

            


            
event對象有三個屬性，分別是origin，data和source。event.data表示接收到的消息；event.origin表示postMessage的發送來源，包括協議，域名和端口；event.source表示發送消息的窗口對象的引用; 我們可以用這個引用來建立兩個不同來源的窗口之間的雙向通信。

            

            9. 

          9. 兼容性

            


            
總體兼容性還是很好的！

            


            

            10. 

          10. 應用場景

            
跨域通信(包括GET請求和POST請求)

            
WebWorker

            
vue項目中使用到了iframe并且需要傳遞參數

            


            
————————————————

            
版權聲明：本文為CSDN博主「zy1281539626」的原創文章，遵循CC 4.0 BY-SA版權協議，轉載請附上原文出處鏈接及本聲明。
            

            
原文鏈接：https://blog.csdn.net/zy1281539626/article/details/114934551

            

            

            

            

            

            
    藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務

            

            
    
            

            

            11. 

          				
          
								
			
          
		
          
		
		
	
          


          
    
  
          
    
          日歷
          
    
          
        
          
        
    
          
  
          
    
    
          
      
          鏈接
          
      
            
                
          
    
          
    
          
      
          個人資料
          
      
          
          
          
                    
          
          
          藍藍設計的小編
          http://www.syprn.cn
          
      
          
    
          
    
          
      
          存檔
          
      
    
          

          

          



亚洲va欧美va天堂v国产综合