溫馨提示×

postMessage的幾種使用方式

小云
314
2023-09-15 07:34:25
欄目: 編程語言

postMessage函數(shù)是用來在兩個窗口之間進行通信的方法，可以在不同窗口之間傳遞消息。它有幾種使用方式：

  1. 單向通信：在一個窗口中調(diào)用postMessage函數(shù)發(fā)送消息，另一個窗口通過監(jiān)聽message事件來接收消息。示例代碼如下：

發(fā)送消息的窗口：

window.postMessage('Hello', 'https://example.com');

接收消息的窗口：

window.addEventListener('message', function(event) {
if (event.origin === 'https://example.com') {
console.log(event.data); // 輸出: Hello
}
});
  1. 雙向通信：在兩個窗口之間建立一個通信通道，可以通過該通道雙向傳遞消息。示例代碼如下：

窗口1：

var channel = new MessageChannel();
var iframe = document.querySelector('iframe');
iframe.contentWindow.postMessage('Hello', '*', [channel.port1]);
channel.port2.addEventListener('message', function(event) {
console.log(event.data); // 輸出: World
});
channel.port2.start();

窗口2（iframe的src為同域的頁面）：

window.addEventListener('message', function(event) {
if (event.source === iframe.contentWindow) {
event.ports[0].postMessage('World');
}
});
  1. 在同一個窗口中的不同上下文之間通信：在同一個窗口中的不同上下文之間可以使用postMessage函數(shù)進行通信。示例代碼如下：

窗口1（主窗口和iframe中的腳本不同源）：

window.addEventListener('message', function(event) {
if (event.origin === 'https://example.com') {
console.log(event.data); // 輸出: Hello
}
});
var iframe = document.querySelector('iframe');
iframe.contentWindow.postMessage('Hello', 'https://example.com');

窗口2（iframe中的腳本）：

window.parent.postMessage('Hello', '*');

這些是postMessage的幾種常見使用方式，可以根據(jù)具體需求選擇合適的方式進行通信。

0 踩