允许点击以将iFrame传递给它后面的内容 [英] Allow click to pass through iFrame to content behind it
问题描述
通过DIV查看底层元素
基本上我有一个DIV被添加到包含iFrame的页面中。 iFrame的内容可以最小化，所以它们不会占用iFrame的所有空间。 iFrame是透明的，所以你仍然可以看到它后面的网页。 我需要能够点击后面网页中的元素，但目前为止没有运气。
他们有一个大约400x400的iFrame，但当其中的内容最小化时，您仍然可以点击它后面的网页。我试图做类似的事情，但无法实现。
即使在透明区域，我也无法点击它后面的页面。我也尝试使用指针事件：没有在其他帖子中提到的，但这没有帮助。它只会禁用iFrame中的元素，但不能通过它点击。
有人知道如何实现这一点吗？有一个更大的iFrame的方法，其中的内容可以最小化，您仍然可以点击iFrame背后的内容？
$ b
更新：
这看起来在使用框架时是不可能的。 策略 1：iFrame Resizer
如果您能够将脚本导入到iFrame中包含的主页和页面中，可以使用Bradshaw的 iFrame Resizer JS。
它会动态的调整您的iFrame以适应其内容。 Works跨域。
它的用例包括：
- 您正在创作主机页面和iFrame页面。
- 您正在创作主机页面或iFrame页面，并正在与其他页面的作者合作。
我无法判断您的用例是否符合其中的任何一个标准。
<策略2：重叠iFrames 使用JQuery，您可以切换完全或部分重叠的2个（或n个）iFrame的可见性。您可以使用相同的内容或不同的内容加载每个iFrame。当任何iFrame不可见时，您可以通过它点击它后面的内容，无论这是另一个iFrame还是其他任何内容。
在您的应用程序中， 2个iFrames不同：iFrame1 =全尺寸，iFrame2 =最小化。
在我的应用程序中（下面），2个iFrames大部分重叠并且具有相同的内容，但是我填充它们的方式不同，稍微改变它们的位置，取决于页面上的其他内容是否存在。我也会动态调整两个iFrames的大小，以适应使用iFrame Resizer（上面）的内容，但这可能不是您的应用程序所必需的。
我建议使用不同的边框颜色为你的iFrames（下面），而你摆弄他们的位置和大小。
我只在5分钟前学过JS，所以，如果我误解了我的道歉。您的问题。
< script src =https://ajax.googleapis.com/ajax/libs/jquery/1.12 0.2 / jquery.min.js>< /脚本>
//这是Bradshaw resizer脚本。如果您需要动态调整大小，则为必需。
< script src =[https://MyiFramehost.com/web/embed/js/inline.js]/>< / script>
< div id =paddedstyle =width：100％>
< / div>
< div id =normalstyle =width：100％; >
< iframe id =oos_inline_paddedstyle =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（）;
}
//开始动态调整大小。如果您需要动态调整大小，则为必需。
iFrameResize（{log：true}）
< / script>
The closest thing I can find to what I'm trying to do on SO is this, but sounds like this is not a workable solution anymore and it is not specific to iFrames anyway: Click through a DIV to underlying elements
Basically I have a DIV that gets added to a page that contains an iFrame. The iFrame contents can be minimized so they don't always take up all the space of the iFrame. The iFrame is transparent so that you can still see the web page behind it. I need to be able to click on the elements in the web page behind it, but have had no luck so far.
They have a roughly 400x400 iFrame but when the contents in it are minimized, you can still click on the web page behind it. I tried doing something similar but can't get it to work.
Even in the transparent regions I cannot click on the page behind it. I also tried using pointer-events:none as mentioned in other posts but this does not help. It only disables the elements in the iFrame but has no affect on being able to click through it.
Do anyone know how to achieve this? A way to have a larger iFrame, where the contents in it can be minimized and you can still click on what's behind the iFrame?
UPDATE: It would appear that this is not possible when using frames.
Strategy 1: iFrame Resizer
If you're able to get scripts into both the host page and the page contained within the iFrame, you can use Bradshaw's iFrame Resizer JS.
It will dynamically resize your iFrame to fit its content. Works cross-domain.
The use cases for it include:
- You are authoring both the host page, and the iFrame page.
- You are authoring either the host page or the iFrame page, and are collaborating with the author of the other page.
I can't tell if your use case meets either of those criteria.
Strategy 2: Overlapping iFrames
Using JQuery, you can toggle the visibility of 2 (or n) iFrames which overlap completely or partially. You can load each iFrame with the same content, or different content. When any iFrame is invisible, you can click through it to the content behind it, whether that's another iFrame, or anything else.
In your application, you would be sizing the 2 iFrames differently: iFrame1="full size", iFrame2="minimized."
In my application (below), the 2 iFrames mostly overlap and have the same content, but I was padding them differently and shifting their position slightly, depending on whether something else on the page was present or absent. I'm also resizing both iFrames dynamically to fit their content using iFrame Resizer (above), but that might not be required for your application.
I recommend using different border colors for your iFrames (below), while you fiddle with their position and size.
I only learned JS like, 5 mins ago, so, my apologies if I've misunderstood your question.
<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>
这篇关于允许点击以将iFrame传递给它后面的内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
