怎么用javascript 监听父页面里的iframe里的click事件

点击事件是Web开发中最常见的事件之一，在JavaScript中监听父页面中的iframe里的click事件可以通过几个不同的技术来实现。最直接的办法是在iframe的内容中添加事件监听器并将事件冒泡到父页面、使用postMessage方法进行跨文档通信、或利用父页面中的脚本利用引用iframe的内容窗口（contentWindow）对象来添加监听器。这些方法都符合跨域政策，前提是iframe和父页面满足同源策略，或者iframe的内容明确允许了跨源交互。

下面详细介绍如何使用JavaScript来监听父页面内iframe的点击事件：

一、在IFRAME内部绑定事件

具有相同源的iframe，可以直接在iframe的内容中绑定点击事件，并将信息传递给父页面。这种方法简单易用，并且不需要额外处理跨域问题，因为被嵌入的内容和父页面共享相同的源。

// 在iframe的内容中，添加click事件监听器
document.addEventListener('click', function(event) {
    // 可以在这里处理点击事件，或者将其冒泡至父页面
    parent.postMessage('iframeClicked', '*');  // '*' 应更换为父页面的确切来源
});

在父页面中接收消息：

// 在父页面中，监听来自iframe的消息
window.addEventListener('message', function(event) {
    if (event.data === 'iframeClicked') {
        console.log('Clicked inside iframe');
    }
});

二、利用CONTENTWINDOW添加事件监听器

如果iframe内容和父页面属于相同的源，可以从父页面中直接访问iframe的document对象，并在其中设置事件监听器。

// 父页面中，获取iframe元素
var iframe = document.getElementById('myIframe');
// 确保iframe加载完成
iframe.onload = function() {
    // 向iframe的内容添加点击事件监听
    iframe.contentWindow.document.addEventListener('click', function(event) {
        // 在这里我们知道iframe内部发生了点击行为
        console.log('Clicked inside iframe from parent');
    });
};

三、使用POSTMESSAGE进行跨文档通信

若iframe和父页面不同源，则需要使用postMessage方法进行跨文档通信。这个方法允许来自不同源的页面相互通信，只要双方都同意监听并发送消息。

// 在iframe的文档中，添加点击事件监听并发送消息至父页面
document.addEventListener('click', function(event) {
    // 'origin' 应以父页面的域替换
    parent.postMessage('iframeClicked', 'origin');
});

父页面监听：

// 在父页面中监听来自iframe的消息
window.addEventListener('message', function(event) {
    // 检查消息来源，确保安全性
    if (event.origin === '指定的域') {
        if (event.data === 'iframeClicked') {
            console.log('Clicked inside iframe');
        }
    }
});