我有一个场景,需要先发送postmessage消息到子iframe,然后等待子iframe回应消息后继续执行一段代码,如何编写该js代码
时间: 2023-11-18 09:02:58 浏览: 64
使用postMesssage()实现跨域iframe页面间的信息传递方法
你可以使用 JavaScript 中的 postMessage API 来在父窗口和子窗口之间发送消息。
在父窗口中,可以使用以下代码向子窗口发送消息:
```javascript
// 获取子窗口的引用
var childWindow = document.getElementById('myIframe').contentWindow;
// 发送消息到子窗口
childWindow.postMessage('Hello from parent!', '*');
```
在子窗口中,可以监听 message 事件来接收来自父窗口的消息:
```javascript
// 监听 message 事件
window.addEventListener('message', function(event) {
// 判断消息来源是否为父窗口
if (event.source !== parent) return;
// 接收来自父窗口的消息
var message = event.data;
// 回应消息到父窗口
parent.postMessage('Hello from child!', '*');
});
```
在你的场景中,可以在父窗口中发送 postMessage 消息到子 iframe,并在回调函数中等待子 iframe 回应消息后继续执行一段代码。以下是一个示例代码:
```javascript
// 获取子 iframe 的引用
var childWindow = document.getElementById('myIframe').contentWindow;
// 发送消息到子 iframe
childWindow.postMessage('Hello from parent!', '*');
// 监听子 iframe 回应消息
window.addEventListener('message', function(event) {
// 判断消息来源是否为子 iframe
if (event.source !== childWindow) return;
// 接收来自子 iframe 的消息
var message = event.data;
// 继续执行一段代码
console.log('Received message from child:', message);
});
```
注意:为了保证安全性,建议在消息传递时指定目标窗口的 origin,以防止跨站点攻击。
阅读全文