Click event on whole page when iframe exists

Question

I have several iframes in my page and then this:

$(document).click(function() {
                if (x) {
                    action();
                }
                else if(y) {
                    anotherAction();    
                };

So when I click anywhere in the page, I would like my page to perform a specific action. But since the iframe is there, I am actually clicking on the iframe and nothing happens. How can I get around this? Maybe setting the iframe as a background image or something along those lines?

Is the iframe serving content from the same origin as the page you're working on? — Jonathan Gray, May 18 '16 at 20:20
Then I don't think there would be a good workaround for this. If you don't care about a user being able to interact with the iframe you can use another element to overlay it. — Jonathan Gray, May 18 '16 at 20:25
user interaction with the iframe is not entirely necessary in my case but it would be nice to have. How would you overlay it with an element? — jgozal, May 18 '16 at 20:26

score 1 · Answer 1 · answered May 18 '16 at 20:30

1

The iframe is technically displaying a different document and what you do in yours doesn't affect what goes inside of the iframe.

Quickest way around it I can think of is placing a transparent div of your own over the iframe, making it so content from your page is covering the iframe content, but that might not be a proper solution depending on what the iframe is supposed to display.

answered May 18 '16 at 20:30

Remysc

187
6

how would you make a transparent div? I did `
` but it is still covering the iframes – jgozal May 18 '16 at 20:36
interesting - I tried everything here but nothing worked: http://stackoverflow.com/questions/11807286/how-to-make-div-background-color-transparent-in-css – jgozal May 18 '16 at 20:41
2

@jgozal It should be transparent by default. Possibly some other CSS messing with it? Try `visibility: hidden` – Jonathan Gray May 18 '16 at 20:43
I had my scroll bar hidden so I didn't realize the div actually moved the iframes down (because the iframes are in divs as well). must be something with the position property, need to refresh my memory on it – jgozal May 18 '16 at 20:48
nothing. I think it is because I am running a setInterval with the iframes which makes them overlay the div every interval – jgozal May 18 '16 at 20:57
2

@jgozal In that case you could try setting the `z-index` on the overlay (making sure to set the `position` to either `relative` or `absolute`). – Jonathan Gray May 18 '16 at 21:00
2

Try to add a z-index to the div perhaps? – Remysc May 18 '16 at 21:00

Click event on whole page when iframe exists

1 Answers1