允许点击通过 iFrame 到它后面的内容

Question

我能找到的最接近我想要在 SO 上做的事情就是这个，但听起来这不再是一个可行的解决方案，而且它也不是 iFrames 特有的： Click through a DIV to underlying elements

基本上，我有一个 DIV，它被添加到包含 iFrame 的页面中。 iFrame 内容可以最小化，因此它们不会总是占用 iFrame 的所有空间。 iFrame 是透明的，因此您仍然可以看到它后面的网页。 我需要能够点击它后面的网页中的元素，但到目前为止还没有运气。

他们有一个大约 400x400 的 iFrame，但是当其中的内容最小化时，您仍然可以点击它后面的网页。我尝试做类似的事情，但无法让它工作。

即使在透明区域我也无法点击它后面的页面。我也尝试过使用其他帖子中提到的指针事件：无，但这没有帮助。它只会禁用 iFrame 中的元素，但不会影响点击它。

有谁知道如何做到这一点？一种拥有更大 iFrame 的方法，其中的内容可以最小化，您仍然可以点击 iFrame 后面的内容？

更新： 使用框架时，这似乎是不可能的。

Answer 1

您是否尝试过指针事件：无？

http://robertnyman.com/2010/03/22/css-pointer-events-to-allow-clicks-on-underlying-elements/

Answer 2

我想你错过了：

myDiv.style.opacity = "0";
myDiv.style.filter  = "alpha(opacity=0)"; /* For IE8 and earlier */

顺便说一句，使用 CSS 类而不是通过 JS 应用 CSS。告诉我进展如何。

Answer 3

策略 1：iFrame 调整大小

如果您能够将脚本同时放入主机页面和 iFrame 中包含的页面，则可以使用 Bradshaw 的 iFrame Resizer JS。

它会动态调整 iFrame 的大小以适应其内容。跨域工作。

它的用例包括：

1. 您正在创作主机页面和 iFrame 页面。
2. 您正在创作主机页面或 iFrame 页面，并且正在与其他页面的作者合作。

我无法判断您的用例是否符合其中任何一个标准。

策略 2：重叠 iFrame

使用 JQuery，您可以切换完全或部分重叠的 2 个（或 n 个）iFrame 的可见性。您可以加载具有相同内容或不同内容的每个 iFrame。当任何 iFrame 不可见时，您可以单击它以查看其背后的内容，无论是另一个 iFrame 还是其他任何内容。

在您的应用程序中，您会以不同的方式调整 2 个 iFrame：iFrame1="full size"、iFrame2="minimized."

在我的应用程序（如下）中，2 个 iFrame 大部分重叠并且具有相同的内容，但我对它们进行了不同的填充并稍微改变了它们的位置，具体取决于页面上是否存在其他内容。我还在使用 iFrame Resizer（上图）动态调整两个 iFrame 的大小以适应它们的内容，但您的应用程序可能不需要这样做。

我建议为您的 iFrame（如下）使用不同的边框颜色，同时调整它们的位置和大小。

5 分钟前我才学过 JS，所以，如果我误解了你的问题，我深表歉意。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>

// This is the Bradshaw resizer script.  Required iff you need dynamic resizing.
<script src="[https://MyiFramehost.com/web/embed/js/inline.js]"/></script> 

<div id="padded" style="width:100%" >
<iframe id="oos_inline" style="border:solid;border-color:green;width:100%;position:relative;padding:65px 0px 0px 0px;top:-65px;"></iframe>
</div>

<div id="normal"style="width:100%;"  >
<iframe id="oos_inline_padded" style="border:solid;border-color:blue;width:100%;position:relative;padding:0px 0px 0px 0px;"></iframe>
</div>

<script>
var iframe_padded = document.getElementById("oos_inline_padded");
var iframe = document.getElementById("oos_inline"); 

if(document.getElementById("home-page")!=null){
    iframe.src = "https://the_embedded_site.com";    
    $(iframe).show();
    $(iframe_padded).hide();
} else {
    iframe_padded.src = "https://the_embedded_site.com";
    $(iframe).hide();
    $(iframe_padded).show();

}

// This starts dynamic resizing.  Required iff you need dynamic resizing.
iFrameResize({log:true})  

</script>