我对postMessage和MessageChannel感到困惑.
以下是MDN的一些代码:
var channel = new MessageChannel();
var para = document.querySelector('p');
var ifr = document.querySelector('iframe');
var otherWindow = ifr.contentWindow;
ifr.addEventListener("load", iframeLoaded, false);
function iframeLoaded() {
otherWindow.postMessage('Hello from the main page!', '*', [channel.port2]);
}
channel.port1.onmessage = handleMessage;
function handleMessage(e) {
para.innerHTML = e.data;
}
我认为postMessage方法只能接受两个参数,上面的代码显示它可能需要三个,但是postMessage方法的第三个参数没有任何内容.
所以有我的问题:
> postMessage方法的第三个参数的含义是什么?
>我知道MessageChannel的用法,但似乎没用,为什么/何时应该使用MessageChannel?
解决方法:
MessageChannel基本上是一个双向通信管道.可以把它想象成window.postMessage / window.onmessage的替代品 – 但是更简单,更易于配置.
This guide解释了postMessage的第三个参数的含义:
An object, the ownership of which is transferred to the receiving browsing context. In this case, we are transferring MessageChannel.port2 to the IFrame, so it can be used to receive the message from the main page.
附:我发现this guide from Opera比Mozilla更容易阅读.