捕获点击iframe周围的div

Question

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

Answer 1

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

此外,如果iframe包含的页面与iframe父级不属于同一个域,则禁止任何交互(重新使用相同的源策略).

当满足相同的源策略时,您可以执行一些操作,可以在iframe父上下文中调用方法:

top.parentFunction();

因此,在iframe中添加一个委托给iframe父级的事件监听器(可以通过top引用访问).

传播事件要复杂得多,所以我只想参考Diego Perini的NWEvents库.我相信他的赛事系统是那里比较好的赛事系统之一,他特别关注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的解决方案,这是最好的.

除非您再次点击,否则它将仅检测到第一次"点击".它只适用于真正的现代浏览器.