postmessage怎么用

来源：互联网 2024-08-22 21:26:41

postMessage用于在不同源的窗口间发送数据，通过targetWindow.postMessage(message, targetOrigin)实现。

在Web开发中，postMessage是一个API，它允许我们在不同的浏览上下文之间安全地传递数据，这在处理跨域通信时特别有用，因为它能避免同源策略的限制。postMessage可以用于窗口与窗口、窗口与iframe以及window和扩展程序之间的通信。

使用postMessage的基本步骤

1、发送消息

使用postMessage方法发送消息非常简单，你只需要调用接收者的postMessage方法，并传入两个参数：要发送的数据和一个表示消息来源的字符串（origin）。

“`javascript

otherWindow.postMessage(‘Hello, there!’, ‘https://example.com’);

“`

2、监听消息

为了接收消息，需要监听message事件，事件处理函数会收到一个包含多个属性的MessageEvent对象，其中最重要的是data（发送的消息内容）和origin（发送消息的源）。

“`javascript

window.addeventListener(‘message’, function(event) {

if (event.origin !== ‘https://example.com’)

return;

console.log(‘received:’, event.data);

}, false);

“`

3、安全问题

由于跨域通信可能会带来安全隐患，因此在使用postMessage时需要注意以下几点：

总是指定确切的origin，不要使用通配符*，除非你完全信任接收方。

在message事件处理函数中检查event.origin，确保消息来自预期的源。

谨慎处理接收到的数据，特别是当你打算执行其中的代码时。

应用场景

postMessage可用于多种场合，

父窗口和嵌套的iframe之间的通信。

不同域名下的页面间的通信。

网页与浏览器扩展之间的通信。

示例代码

下面是一个使用postMessage实现跨域通信的简单示例：

父窗口（parent.html）：

<!DOCTYPE html><html><head>  <title>Parent Window</title></head><body>  <iframe src="http://www.example.com/iframe.html" id="frame"></iframe>  <script>    var frame = document.getElementById('frame');    frame.onload = function() {      frame.contentWindow.postMessage('Hello from parent', 'http://www.example.com');    };    window.addEventListener('message', function(event) {      if (event.origin !== 'http://www.example.com') return;      console.log('Received message:', event.data);    }, false);  </script></body></html>

iframe（iframe.html）：

<!DOCTYPE html><html><head>  <title>Iframe</title></head><body>  <script>    window.addEventListener('message', function(event) {      if (event.origin !== 'http://www.parent.com') return;      console.log('Received message:', event.data);      event.source.postMessage('Hello from iframe', event.origin);    }, false);  </script></body></html>