文章目錄

• • 1. 作用
  • 2. 語法
  • 3. 使用
  • 4. 兼容性
  • 5. 應用場景

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

1. 作用

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

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

2. 語法

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

基本語法：

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

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

• Window.open
• Window.opener
• HTMLIFrameElement.contentWindow
• Window.parent
• Window.frames +索引值

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

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

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

3. 使用

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表示發送消息的窗口對象的引用; 我們可以用這個引用來建立兩個不同來源的窗口之間的雙向通信。

4. 兼容性

總體兼容性還是很好的！

5. 應用場景

• 跨域通信(包括GET請求和POST請求)
• WebWorker
• vue項目中使用到了iframe并且需要傳遞參數
  

總結

以上是生活随笔為你收集整理的postMessage跨域、跨iframe窗口消息传递的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。