我能找到的最接近我在 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 不同。