写出 postMessage 获取数据方法
时间: 2023-08-10 21:54:34 浏览: 56
要使用 `postMessage` 方法在父页面和子页面之间进行通信,您需要在两个页面中编写相应的代码。下面是一个示例,展示了如何在父页面中发送消息并在子页面中接收消息:
在父页面(发送消息):
```javascript
// 获取 iframe 对象
var iframe = document.getElementById("myIframe");
// 发送消息给子页面
iframe.contentWindow.postMessage("Hello from parent page!", "https://www.example.com");
```
在子页面(接收消息):
```javascript
// 监听消息事件
window.addEventListener("message", function(event) {
// 确保消息来源是父页面
if (event.origin !== "https://www.example.com") return;
// 接收到来自父页面的消息
var message = event.data;
console.log("Received message from parent page:", message);
// 在此处可以根据需要对接收到的消息进行处理
});
```
在上面的示例中,我们首先在父页面通过 `document.getElementById` 获取到了 id 为 "myIframe" 的 iframe 对象。然后,使用 `iframe.contentWindow.postMessage` 方法向子页面发送了一条消息。该方法的第一个参数是要发送的消息内容,第二个参数是子页面的源。请注意,您需要将正确的子页面源 URL 替换为 `"https://www.example.com"`。
在子页面中,我们使用 `window.addEventListener` 监听了消息事件。当接收到来自父页面的消息时,我们首先通过 `event.origin` 来检查消息来源是否是我们期望的父页面。然后,我们可以通过 `event.data` 来获取消息内容,并对其进行处理。
请注意,`postMessage` 方法和消息事件的详细用法和注意事项取决于您的具体需求和上下文。以上示例仅提供了基本的用法示例。