JavaScript Events On An IFrame

Question

Is there a way to attach an onclick event to an IFrame?

I tried using the HTML attribute, but that didn't work. Then I tried surrounding it with a div, and that didn't work. Then I tried setting up a jQuery event handler, but the same result.

I'm assuming that when you click inside the frame, you're not clicking in the DOM, so it doesn't pick it up.

Is this correct? Anyway around it?

Have a look at http://stackoverflow.com/questions/15080222/add-click-event-to-iframe — bitfiddler, Oct 07 '14 at 02:34

score 0 · Answer 1 · edited May 23 '17 at 12:20

0

If both the parent DOM and child DOM (i.e., iframe) are from same domain then the link provided by bitfiddler should work fine.

If not, then use libraries like Porthole to achieve the same.

Demo site: http://sandbox.ternarylabs.com/porthole/

edited May 23 '17 at 12:20

Community

1
1

answered Oct 07 '14 at 05:25

Manoj Namodurai

529
2
7

Fred Chateau · Answer 2 · 2014-10-07T19:21:29.357

Thank you, but they are in different domains.

After reading some other postings here, I decided to try using an overlay with CSS Pointer Events set to none, and it worked.

For the benefit of anyone wanting to try this, the main declarations are...

In the overlay:
    z-index: 100;

In the IFrame:
    position: relative;
    top: -123px;
    left: 0;
    pointer-events: none;

In other words, the overlay's z-index must be higher than the IFrame.

The IFrame must be positioned absolutely, or relative to the overlay.

You must set pointer-events to none.

JavaScript Events On An IFrame

2 Answers2