Allow click to pass through iFrame to content behi

Question

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.

Answer 1

Have you tried pointer-events: none?

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

Answer 2

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:

1. You are authoring both the host page, and the iFrame page.
2. 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>

Answer 3

I think you missed:

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

BTW, use a CSS class instead of applying CSS via JS. Let me know how it goes.