JavaScript中的postMessage方法详解|极客笔记

JavaScript中的postMessage方法详解

在JavaScript中，postMessage方法是用于在不同的窗口（包括iframe和父窗口）之间安全地传递数据的一种方式。通过postMessage方法，我们可以实现跨域通信，以及在浏览器中创建复杂的消息传递系统。

postMessage方法的基本用法

postMessage方法是一个在窗口间传递数据的API，其基本语法如下：

targetWindow.postMessage(message, targetOrigin);

targetWindow：目标窗口的引用，可以是另一个窗口、iframe、或者parent窗口。
message：要发送的数据，可以是一个字符串、对象或数组。
targetOrigin：指定目标窗口的源，可以是一个URL、”*”（匹配所有域名）、或者一个特定的域名。

postMessage方法的示例

在两个窗口之间传递数据

下面是一个简单的示例，展示了如何在父窗口和子窗口之间传递数据：

// 在父窗口中
var childWindow = window.open('child.html'); // 打开子窗口
var message = { text: 'Hello from parent window!' };
childWindow.postMessage(message, 'http://localhost:8080');

// 在子窗口（child.html）中
window.addEventListener('message', function(event) {
  if (event.origin === 'http://localhost:8080') {
    var message = event.data;
    console.log('Message received in child window: ', message);
  }
});

在这个示例中，父窗口通过postMessage方法向子窗口发送了一个包含文本消息的对象。子窗口通过监听message事件，对来自父窗口的消息进行处理。

在iframe和父窗口之间传递数据

下面是一个示例，展示了如何在iframe和父窗口之间传递数据：

// 在父窗口中
var iframe = document.createElement('iframe');
iframe.src = 'child.html';
document.body.appendChild(iframe);

window.addEventListener('message', function(event) {
  if (event.origin === 'http://localhost:8080') {
    var message = event.data;
    console.log('Message received in parent window: ', message);
  }
});

// 在iframe中的child.html文件中
window.addEventListener('message', function(event) {
  var message = event.data;
  console.log('Message received in iframe: ', message);
  event.source.postMessage({ text: 'Hello from iframe!' }, 'http://localhost:8080');
});