一、簡介
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>
三、兼容性
所有瀏覽器都兼容。
四、參考文章