Stories

Detail Return Return

postMessage - Stories Detail

此方法可以用於實現跨源通信等,我們來演示如何實現在兩個窗口之間進行通信。

假設我們現在有兩個頁面: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等也是可以的,不過有一個基本的原則要注意:發送信息的時候,一定要確保接收方已經完成了信息接收事件的註冊。

user avatar toopoo Avatar dingtongya Avatar jingdongkeji Avatar aqiongbei Avatar leexiaohui1997 Avatar longlong688 Avatar huajianketang Avatar inslog Avatar xiaolei_599661330c0cb Avatar woniuseo Avatar zzd41 Avatar wmbuke Avatar
Favorites 123 users favorite the story!
Favorites

Add a new Comments

Some HTML is okay.