我能找到的最接近我在 SO 上尝试做的事情是这个，但听起来这不再是一个可行的解决方案，而且它也不是特定于 iFrames 的： 单击 DIV 到底层元素
基本上我有一个 DIV，它被添加到包含 iFrame 的页面中。 iFrame 内容可以最小化，这样它们就不会总是占用 iFrame 的所有空间。 iFrame 是透明的，因此您仍然可以看到其后面的网页。 我需要能够单击其后面网页中的元素，但到目前为止还没有运气。
它们有一个大约 400x400 的 iFrame，但是当其中的内容最小化时，您仍然可以单击其后面的网页。我尝试做类似的事情，但无法让它发挥作用。
即使在透明区域，我也无法单击其后面的页面。我还尝试使用其他帖子中提到的指针事件：无，但这没有帮助。它只会禁用 iFrame 中的元素，但不会影响点击它。
有人知道如何实现这一目标吗？一种拥有更大 iFrame 的方法，其中的内容可以最小化，但您仍然可以单击 iFrame 后面的内容？
更新： 使用框架时，这似乎是不可能的。
策略 1：iFrame Resizer
如果您能够将脚本放入主机页面和 iFrame 中包含的页面中，则可以使用 Bradshaw 的 iFrame Resizer JS。
它将动态调整 iFrame 的大小以适应其内容。跨域工作。
它的用例包括：
我无法判断您的用例是否符合这些标准。
策略 2：重叠 iFrames
使用 JQuery，您可以切换完全或部分重叠的 2 个（或 n 个）iFrame 的可见性。您可以加载具有相同内容或不同内容的每个 iFrame。当任何 iFrame 不可见时，您可以单击它查看其后面的内容，无论是另一个 iFrame 还是其他任何内容。
在您的应用程序中，您将以不同的方式调整 2 个 iFrame 的大小：iFrame1=“完整尺寸”，iFrame2=“最小化”。
在我的应用程序（如下）中，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>
我想你错过了：
myDiv.style.opacity = "0";
myDiv.style.filter = "alpha(opacity=0)"; /* For IE8 and earlier */
顺便说一句，使用 CSS 类而不是通过 JS 应用 CSS。让我知道进展如何。
这是不可能的，但在某些情况下还有另一种选择，即使用Shadow DOM。在某些情况下，这是比使用 iframe 更好的解决方案。就像您的情况一样，您有一个在第三方网站上加载的脚本。
Shadow DOM 基本上将样式与父窗口隔离，反之亦然。它还在一定程度上隔离了DOM（windows对象）。所有这一切同时将其保留为同一页面中的普通 HTML 元素，与 iframe 不同。