此方法可以用於實現跨源通信等,我們來演示如何實現在兩個窗口之間進行通信。
假設我們現在有兩個頁面:page1.html和page2.html, 他們的關係是通過iframe關聯起來的,就像這樣(下面是page1.html的內容):
<iframe id="receiver" src="./page2.html" width="300" height="100"></iframe>
為了實現通信,首先你需要在page2.html中註冊事件監聽:
window.addEventListener('message', function (e) {
console.log(e);
});
確保page2.html中事件監聽註冊好了以後,在page1.html中首先需要獲取page2.html的窗口對象:
var targetWindow = document.getElementById('receiver').contentWindow;
然後,直接使用其中的postMessage即可發送:
targetWindow.postMessage("你好呀!", "*");
在實際使用中,兩個頁面不一定需要通過iframe關聯,比如使用window.location.href等也是可以的,不過有一個基本的原則要注意:發送信息的時候,一定要確保接收方已經完成了信息接收事件的註冊。