Allow click to pass through iFrame to content behind it

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.

Proximity

How about trapping all clicks in the iframe and then sending them back to the parent page? – Nedanedda

How would I pass them to the parent page? What about hover effects on underlying buttons? – Proximity

Hi - have you been able to figure out a solution to this? – Etherege

@Etherege I don't believe it's possible – Proximity

Answer 1

Have you tried pointer-events: none?

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

Handyman

Yes, it just disables the ability to click on anything in the iFrame but you still can't click on anything behind it. – Proximity

As stated in the Mozilla developer site, it will click "underneath" the element. developer.mozilla.org/en-US/docs/Web/CSS/pointer-events#Values – Nieman

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>

Deform

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.

Upgrade

I already tried opacity, but no luck. I have it commented out in my original post actually. I don't want to use a CSS file in this case because this getz loaded dynamically and I don't want to download the file for just this one thing. This script goes on someone else's site. – Proximity

The only thing that works is visibility hidden but then everything in my iframe is invisible. – Proximity

Then, you could just apply visibility: hidden when iframe is minimized. – Upgrade

Even when it is minimized there is still content in it. I would need to poll the server to know what is going on in the iframe and i want to avoid that. Basically it is a collapse tab inside an iframe that expands, but when it is collapsed (i.e.: smaller), I still want to be able to click behind the invisible regions. – Proximity

Please, add an screenshot (or several) to show exactly what you need. – Upgrade

Answer 4

It is not possible, but there is an alternative in some cases, which is using Shadow DOM. That is a better solution than using an iframe in some cases. Like in your case, where you have a script that loads on a third-party website.

Shadow DOM basically isolates the styles from the parent window, and vice versa. It also isolates the DOM (windows object) to some extent. All of that while keeping it as a normal HTML element within the same page, unlike iframes.

Milker