Question

如何在围绕iframe的div上捕获click或mousedown事件。我已经尝试将函数附加到div上的click事件，但由于iframe从未将事件冒泡到周围的div，因此函数永远不会被调用。有没有办法可以在div上捕获事件，然后将其传播到iframe进行默认操作

Answer 1

如果点击位于iframe区域，iframe上下文会处理点击事件，它不会冒泡到iframe父级。因此，如果它发生在iframe区域，div将永远不会注册click事件。

此外，如果iframe包含的页面与iframe父级不属于同一个域，则禁止任何互动（重新same origin policy）。

当满足same origin policy时，您可以执行一些操作，可以在iframe父上下文中调用方法：

top.parentFunction();

因此，在iframe中添加一个委托给iframe父级的事件监听器（可通过top引用访问。

传播事件要复杂得多，所以我只想引用Diego Perini's NWEvents library。我相信他的赛事系统是最好的赛事系统之一，他特别关注iframe的互动。

我当然不会开始编写自己的代码来实现这一目标，如果你想要做到这一点，这很容易成为一年的项目，即使这样也不如迭戈的工作。

Answer 2

没有“好”的方法，但如果你真的需要检测iframe的点击，你可以在最新的浏览器中做到这一点。

<iframe src="http://mtw-ed.com/" id="iframe" style=""></iframe>

<script type="text/javascript">
var inIframe = false;
function checkClick() {
    if (document.activeElement 
      && document.activeElement === document.getElementById("iframe")) {
        if (inIframe == false) {
            alert("iframe click");
            inIframe = true;
        }
    } else
        inIframe = false;
}
setInterval(checkClick, 200);
</script>

此脚本将每隔200ms检查用户是否在Iframe中。当然，他们可能没有点击Iframe来实现目标，但我担心如果没有@ BGerrissen的解决方案，这是最好的。

除非您再次点击，否则它将仅检测到第一次“点击”。它只能在真正的现代浏览器中使用。

Answer 3

您可以使用porthole之类的库在父级和iframe之间传递邮件，甚至跨域传递邮件。使用它不会完全传播事件（您将无法获取事件对象），但您可以以简单消息的形式创建自己的事件，然后在父项中单击处理它。

Here's their example

然而，我已经使用过Brendon的答案，因为它对我目前的需求来说更简单。

捕获点击iframe周围的div

3 个答案: