一、简介
MessageChannel 接口允许我们创建一个新的消息通道，并通过它的两个MessagePort 属性发送数据。
简单来说，MessageChannel创建了一个通信的管道，这个管道有两个口子，每个口子都可以通过postMessage发送数据，而一个口子只要绑定了onmessage回调方法，就可以接收从另一个口子传过来的数据。
MessageChannel的使用场景：
- 2个 Web Worker 间通信
二、2个简单的使用例子
例子1：
var ch = new MessageChannel();
var p1 = ch.port1; // MessagePort
var p2 = ch.port2; // MessagePort
p1.onmessage = function(e){console.log("port1 receive " + e.data)}
p2.onmessage = function(e){console.log("port2 receive " + e.data)}
p1.postMessage("1111");
p2.postMessage("2222");
// port2 receive 1111
// port1 receive 2222
例子2：主页面和 iframe 页面通信
index.html
<body>
<h1>Channel messaging demo</h1>
<p class="output">My body</p>
<iframe src="page.html" width='480' height='320'></iframe>
</body>
<script>
var channel = new MessageChannel();
var output = document.querySelector('.output');
var iframe = document.querySelector('iframe');
iframe.addEventListener("load", onLoad);
function onLoad() {
channel.port1.onmessage = onMessage;
// Transfer port2 to the iframe
iframe.contentWindow.postMessage('Hello from the main page!', '*', [channel.port2]);
}
function onMessage(e) {
output.innerHTML = e.data;
}
</script>
page.html
<body>
<p class="output">iFrame body</p>
</body>
<script>
var output = document.querySelector('.output');
window.addEventListener('message', onMessage);
function onMessage(e) {
output.innerHTML = e.data;
e.ports[0].postMessage('Message back from the IFrame');
}
</script>
三、兼容性
所有浏览器都兼容。
四、参考文章