捕获点击围绕 iframe 的 div

Posted 2023-05-07

【中文标题】捕获点击围绕 iframe 的 div

【英文标题】：Capture click on div surrounding an iframe

【发布时间】：2011-04-11 02:05:49

【问题描述】：

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

【参考方案1】：

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

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

当遇到same origin policy 时，您可以做一些事情，您可以在 iframe 父上下文中调用方法：

top.parentFunction();

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

传播事件要复杂得多，所以我只是参考Diego Perini's NWEvents library。我相信他的事件系统是目前最好的之一，而且他特别擅长 iframe 交互。

我当然不会开始编写自己的代码来实现这一点，如果你想做得好，这很容易成为一个长达一年的项目，即使那样也会不如 Diego 的工作。

【讨论】：

不允许在父框架或祖先框架上调用函数（现在），所以不幸的是这将不再起作用（不再）。作为旁注，有window.parent（父框架）和window.top（始终是“最顶层”框架，即用户在浏览器中打开的页面）。

【参考方案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>

此脚本将每 200 毫秒检查一次用户是否在 iframe 中。当然，他们可能没有点击 iframe 到达那里，但恐怕这是没有@BGerrissen 的解决方案你能做的最好的事情。

它将仅检测第一次“点击”，除非您再次点击退出。它只适用于真正现代的浏览器。

【讨论】：

像 iPhone 的魅力一样工作

我试图检测对社交分享按钮（即 iframe）的点击，用这种方法制作了一个微小的角度指令，哇，它工作得很好！谢谢！

【参考方案3】：

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

Here's their example

但是，我使用了 Brendon 的答案，因为它更简单地满足我当前的需求。