监听div盒子中的iframe事件变化
时间: 2023-11-04 17:17:16 浏览: 68
Vue监听数据对象变化
由于跨域限制,无法直接监听在div盒子中的iframe事件变化。但是,可以在iframe中添加事件监听器,并通过postMessage方法将事件信息传递给父页面,从而实现跨域通信。以下是示例代码:
在iframe中添加事件监听器:
```
window.addEventListener('load', function() {
var btn = document.getElementById('myButton');
btn.addEventListener('click', function() {
var message = { type: 'buttonClick' };
window.parent.postMessage(JSON.stringify(message), '*');
});
});
```
在父页面中监听事件:
```
window.addEventListener('message', function(event) {
var message = JSON.parse(event.data);
if (message.type === 'buttonClick') {
// 处理按钮点击事件
}
});
```
请注意,'*'参数表示允许任何来源的页面都可以接收消息。在生产环境中,应该指定特定的来源。
阅读全文