动态

详情 返回 返回

postMessage - 动态 详情

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

假設我們現在有兩個頁面: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 头像 dingtongya 头像 jingdongkeji 头像 aqiongbei 头像 leexiaohui1997 头像 longlong688 头像 huajianketang 头像 inslog 头像 xiaolei_599661330c0cb 头像 woniuseo 头像 zzd41 头像 wmbuke 头像
点赞 123 用户, 点赞了这篇动态!
点赞

Add a new 评论

Some HTML is okay.