此方法可以用于实现跨源通信等,我们来演示如何实现在两个窗口之间进行通信。
假设我们现在有两个页面: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等也是可以的,不过有一个基本的原则要注意:发送信息的时候,一定要确保接收方已经完成了信息接收事件的注册。
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。