捕获点击围绕 iframe 的 div [英] Capture click on div surrounding an iframe
问题描述
如何在 iframe 周围的 div 上捕获 click 或 mousedown 事件.我尝试将函数附加到 div 上的单击事件，但由于 iframe 永远不会将事件冒泡到周围的 div，因此永远不会调用该函数.有没有办法可以捕获 div 上的事件，然后将其传播到 iframe 以进行默认操作?
How can I capture a click or mousedown event on a div surrounding an iframe. I've tried attaching the function to click event on the div but since the iframe never bubbles the event up to the surrounding div the function is never called. Is there a way I can capture the event on the div and then propagate it to the iframe for default action?
推荐答案
如果点击在 iframe 区域，iframe 上下文处理点击事件，它不会冒泡到 iframe 父级.因此，如果点击事件发生在 iframe 区域，div 将永远不会注册它.
If the click is in the iframe area, the iframe context handles the click event, it does not bubble up to the iframe parent. So the div will never register the click event at all if it happened in the iframe area.
此外，如果 iframe 包含与 iframe 父级不属于同一域的页面，则禁止任何交互(re. 同源策略).
Furthermore, if the iframe contains a page that does not belong to the same domain as the iframe parent, any interaction is prohibited (re. same origin policy).
当同源政策得到满足时，你可以做一些事情，你可以在 iframe 父上下文中调用方法:
When the same origin policy is met, there are a few things you can do, you could call a method in the iframe parent context:
top.parentFunction();
因此，在 iframe 中添加一个事件侦听器，该事件侦听器委托给 iframe 父级(可通过 top 参考访问.
So in the iframe you add an event listener that delegates to the iframe parent (accessible with the top reference.
传播事件要复杂得多，所以我只是参考 Diego Perini 的 NWEvents 库.我相信他的事件系统是目前最好的之一，而且他特别擅长 iframe 交互.
Propagating events is a lot more complicated, so I'm simply going to refer to Diego Perini's NWEvents library. I believe his event system to be one of the better ones out there and he's particular on iframe interaction.
我当然不会开始编写自己的代码来实现这一点，如果你想做得好，这很容易成为一个长达一年的项目，即使那样也会不如 Diego 的工作.
I certainly would not start writing your own code to achieve this, this can easily be a year long project if you want to do it properly and even then will be inferior to Diego's work.
这篇关于捕获点击围绕 iframe 的 div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
