我将如何检测特定 iframe 外部的 onclick 事件？

Question

我有一个页面，其中包含一堆不同的 iframe（A、B、C、D）——所有这些 iframe 在任何时候都是完全可见的。它们共同构成了我的应用程序 UI 的各个部分。其中一个 iframe，iframe D - 包含另一个较小的 iframe (iframe X)，有时通过用户操作使其可见。每当用户在其外部单击时，它应该会自动消失。我可以通过在主体上单击 onclick 轻松地从 iframe D 中处理此问题。如果我真的在 iframe D 的正文中检测到点击——这意味着他们没有在 iframe X 中点击，所以我可以通过 CSS 隐藏 iframe X。没问题。

问题在于其他 iframe - A、B 和 C。如果用户在其中点击，我也想隐藏 iframe X。目前，我可以正常工作-但效果不佳。对于这些 iframe（A、B、C）中的每一个，我都有将主体点击传达给 iframe D 的代码。我不喜欢这种方法，因为 iframe A、B、C 都知道 iframe X - 真的应该有不需要这个，它只是添加到我必须更改以支持 iframe X 提供的功能的文件中。我有什么方法可以处理所有从 iframe D 中检测到的外部 onclick 事件？这将将 iframe X 的显示/隐藏逻辑留在 iframe D 中，这使得代码更容易移动。

如果我开始进行 onclick 监控 - 我也想知道它是否会处理 所有 点击 - 例如，如果 iframe A 在特定元素上设置了一些 onclick 事件 - 我肯定也会抓住那些点击？我提到这一点是因为我当前的解决方法似乎存在缺陷（iframe A、B、C 将它们的正文 onclicks 报告给 iframe D）——某些点击不会触发正文 onclick。

提前谢谢各位。但是请记住，在项目的这个阶段移除 iframe 是不现实的。

Answer 1

事件不会冒泡超出 iframe 边界，因为这会带来安全风险。 想象一个钓鱼网站，它在 iframe 中嵌入了银行网站，并安装了 onkeypress 处理程序来记录用户在嵌入框架中键入的任何密码。

你最好的办法是让外框安装你正在做的主体处理程序，也许还安装 onunload 处理程序，这样它就可以根据需要重新安装主体处理程序。

是的，在单击事件上取消冒泡的事件处理程序将从正文事件处理程序中隐藏它。

Answer 2

在外部文档上放置一个 YUI 面板对象。

然后不显示 iframe X，而是显示 YUI 面板，使用模态模式，并在面板内容上放置

当您调用 parent.panel.show() 时，它将显示在所有帧上，并且可以轻松自定义以允许在面板外单击以将其关闭。

Answer 3

考虑到 iframe 限制，您无法以可靠的方式执行此操作。 可能有很多解决方法，但不确定是否适合您的需求。 也许，您可以通过 ajax ping 后端并触发更改？ 或者，使用两个版本，一个是打开的孩子，一个是关闭的，然后你可以操纵父隐藏/显示。 或者，将 iframe X 替换为非 iframe 的其他内容。 等等 它们可能不是满足您特定需求的可行解决方案。但只是想法。