前言
本文主要介紹postMessgae的基本使用，它主要用來解決跨域的頁面通訊，當然你可以用來作為跨頁面的常規方案。
基本使用
傳送方
otherWindow.postMessage(message, targetOrigin, [transfer]); 備註：Transferable 介面代表一個能在不同可執行上下文中相互傳遞的物件，列如主執行緒和 Worker 間。我們一般只需要知道前面兩個傳參就可以了。
window.postMessage() 方法被呼叫時，會在所有頁面指令碼執行完畢之後（e.g., 在該方法之後設定的事件、之前設定的timeout 事件,etc.）向目標視窗派發一個 MessageEvent 訊息。 該MessageEvent訊息有四個屬性需要注意： message 屬性表示該message 的型別； data 屬性為 window.postMessage 的第一個引數；origin 屬性表示呼叫window.postMessage() 方法時呼叫頁面的當前狀態； source 屬性記錄呼叫 window.postMessage() 方法的視窗資訊。
var message='hello world ';
var target='*'
var transfer=[]
window.postMessage('hello',target,transfer)
複製程式碼監聽方
一般用來收取傳送的資訊，message 的屬性有:
- data 從其他 window 中傳遞過來的物件。
- origin 呼叫 postMessage 時訊息傳送方視窗的 origin . 這個字串由 協議、“://“、域名、“ : 埠號”拼接而成。例如 “https://example.org (隱含埠 443)”、“http://example.net (隱含埠 80)”、“http://example.com:8080”。請注意，這個origin不能保證是該視窗的當前或未來origin，因為postMessage被呼叫後可能被導航到不同的位置。
- source 對傳送訊息的視窗物件的引用; 您可以使用此來在具有不同origin的兩個視窗之間建立雙向通訊。
window.addEventListener("message", receiveMessage, false);
function receiveMessage(event)
{
// For Chrome, the origin property is in the event.originalEvent
// object.
var origin = event.origin || event.originalEvent.origin;
if (origin !== "http://example.org:8080")
return;
// ...
}
複製程式碼安全性
如果您不希望從其他網站接收message，請不要為message事件新增任何事件偵聽器。 這是一個完全萬無一失的方式來避免安全問題。
如果您確實希望從其他網站接收message，請始終使用origin和source屬性驗證發件人的身份。 任何視窗（包括例如http://evil.example.com）都可以向任何其他視窗傳送訊息，並且您不能保證未知發件人不會傳送惡意訊息。 但是，驗證身份後，您仍然應該始終驗證接收到的訊息的語法。 否則，您信任只傳送受信任郵件的網站中的安全漏洞可能會在您的網站中開啟跨網站指令碼漏洞。
當您使用postMessage將資料傳送到其他視窗時，始終指定精確的目標origin，而不是*。 惡意網站可以在您不知情的情況下更改視窗的位置，因此它可以攔截使用postMessage傳送的資料。
相容性
- pc：
- 手機