乐趣区

关于postmessage: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 等也是能够的,不过有一个根本的准则要留神:发送信息的时候,肯定要确保接管方曾经实现了信息接管事件的注册。

退出移动版