iframe 存在时整个页面的点击事件

Posted 2023-02-21

【中文标题】iframe 存在时整个页面的点击事件

【英文标题】：Click event on whole page when iframe exists

【发布时间】：2016-09-15 12:19:20

【问题描述】：

我的页面中有几个 iframe，然后是：

$(document).click(function() 
                if (x) 
                    action();
                
                else if(y) 
                    anotherAction();    
                ;

因此，当我单击页面中的任意位置时，我希望我的页面执行特定操作。但是由于 iframe 在那里，我实际上是在点击 iframe 并且没有任何反应。我怎样才能解决这个问题？也许将 iframe 设置为背景图像或类似的东西？

【问题讨论】：

iframe 提供的内容是否与您正在处理的页面的来源相同？

不幸的是，它不是

那么我认为没有一个好的解决方法。如果您不关心用户能否与 iframe 进行交互，您可以使用另一个元素来覆盖它。

在我的情况下，用户与 iframe 的交互并不是完全必要的，但如果有它会很好。你会如何用一个元素覆盖它？

【参考方案1】：

iframe 在技术上显示的是不同的文档，您在其中执行的操作不会影响 iframe 内部的内容。

我能想到的最快解决方法是在 iframe 上放置一个您自己的透明 div，使其页面中的内容覆盖 iframe 内容，但这可能不是一个正确的解决方案，具体取决于 iframe 是什么应该显示。

【讨论】：

如何制作透明的 div？我做了<div class="invisibleOverlay" style="background-color:transparent;"></div>，但它仍然覆盖 iframe

有趣 - 我在这里尝试了一切，但没有任何效果：***.com/questions/11807286/…

@jgozal 默认应该是透明的。可能是其他一些 CSS 搞砸了它？试试visibility: hidden

@jgozal 在这种情况下，您可以尝试在叠加层上设置z-index（确保将position 设置为relative 或absolute）。

试试给 div 添加一个 z-index 吧？