跨域生成的iframe,通过document.body.addEventListener(‘click’, function(event) 监听不到点击,怎么通过postMessage API来进行通信?
时间: 2024-10-11 15:12:48 浏览: 37
跨域的iframe由于同源策略限制,直接使用`document.body.addEventListener`监听点击事件确实不可行。然而,你可以借助`postMessage` API 进行父子页面间的通信。下面是一个基本的步骤:
1. **主页面** (允许iframe嵌入的页面) 设置一个发送事件的函数,比如当用户点击时:
```javascript
document.getElementById('myIframe').contentWindow.postMessage({ event: 'click', data: event }, '*');
```
这里假设`myIframe`是iframe元素的ID。
2. **iframe** 页面接收到消息后,在`message`事件处理器中处理它:
```javascript
window.addEventListener('message', function(e) {
if (e.origin !== '*' && !e.origin.includes(location.host)) return; // 验证来源是否可信
if (e.data.event === 'click') {
console.log('Received click event from parent:', e.data);
// 在这里执行你想对点击事件的响应操作
}
}, false);
```
注意:`*`作为`postMessage`的第一个参数表示接受来自所有源的消息。实际应用中你需要更严格的控制来源,通常只接受特定域名。
阅读全文