Add click event to iframe

Question

I want to add a click event to an iframe. I used this example and got this:

$(document).ready(function () {
   $('#left').bind('click', function(event) { alert('test'); });
});

<iframe src="left.html" id="left">
</iframe>

But unfortunately nothing happens.
When I test it with another element (e.g. a button), it works:

<input type="button" id="left" value="test">

I have several iframe on my page. I want that context menu to be expandable over them. — Evgenij Reznik, Feb 26 '13 at 02:27

Christophe · Accepted Answer · 2013-02-26T14:57:02.510

32

You could attach the click to the iframe content:

$('iframe').load(function(){
  $(this).contents().find("body").on('click', function(event) { alert('test'); });
});

Note: this will only work if both pages are in the same domain.

Live demo: http://jsfiddle.net/4HQc4/

edited Feb 26 '13 at 14:57

answered Feb 26 '13 at 03:02

Christophe

27,383
28
97
140

Oh, i see. It only works when i click the text, but not somewhere else on the page. – Evgenij Reznik Feb 26 '13 at 15:05
It works when you click anywhere within the iframe body. Here is another example where the click is attached to the window: http://jsfiddle.net/4HQc4/1/ – Christophe Feb 26 '13 at 17:42
The code in your Life demo worked for me: `$($("iframe")[0].contentWindow).on('contextmenu', function(e) { alert('test'); });` – Evgenij Reznik Feb 27 '13 at 00:10
It is also possible, to add the click-event on a specific DIV within this iframe? My iframe is devided into 2 divs and only on of them should be clickable. – Evgenij Reznik Feb 27 '13 at 02:23
1

Sure :-) $(this).contents().find("#idOfTheClickableDiv"). contents() is the iframe document, from there you can reach whatever you want within the iframe... provided that you don't break the same origin policy. – Christophe Feb 27 '13 at 02:35
@Christophe: can u take a look at the basic plnkr created frm ur example. Its not working. :( https://plnkr.co/edit/KDUpwWd76ESrqHXIvrpN?p=preview – Shashank Vivek Apr 02 '17 at 12:08
@SaurabhMistry the live demo is not working for you? – Christophe Aug 05 '18 at 04:03
AKA this is NOT an option if you're doing a youtube.com iFrame and trying to know when that youtube video inside the iFrame clicked... since youtube.com != your domain... :( ... For others trying to do Google Analytics against embedded youtube videos on your page. – Don Cheadle Aug 22 '19 at 16:36

Roko C. Buljan · Answer 2 · 2022-07-25T05:53:26.853

Two solutions:

Using :after on a .iframeWrapper element
Using pointer-events:none; one the iframe

1. Using `:after`

use a transparent overlay ::after pseudo element with higher z-index on the iframe's wrapper DIV element. Such will help the wrapper to register the click:

jQuery(function ($) { // DOM ready
  
   $('.iframeWrapper').on('click', function(e) {
     e.preventDefault();
     alert('test');
   });
  
});

.iframeWrapper{
  display:inline-block;
  position:relative;
}
.iframeWrapper::after{ /* I have higher Z-index so I can catch the click! Yey */
  content:"";
  position:absolute;
  z-index:1;
  width:100%;
  height:100%;
  left:0;
  top:0;
}

.iframeWrapper iframe{
  vertical-align:top;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="iframeWrapper">
  <iframe src="http://www.reuters.tv/" frameBorder="0"></iframe>
</div>

2. Using `pointer-events:none;`

Clicks are not handleable from outside the iframe from an external resource (if the iframe is not in your domain).
You can only create that function inside your 'called into iframe' page, not from within the iframe-hosting page.

How to do it:

You can wrap your iframe into a div
make the click "go through" your iframe using CSS pointer-events:none;
target clicks with jQuery on your wrapping DIV (the iframe parent element)

jQuery(function ($) { // DOM ready
  
   $('.iframeWrapper').on('click', function(e) {
     e.preventDefault();
     alert('test');
   });
  
});

.iframeWrapper{
  display:inline-block;
  position:relative;
}

.iframeWrapper iframe{
  vertical-align:top;
  pointer-events: none; /* let any clicks go trough me */
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="iframeWrapper">
  <iframe src="http://www.reuters.tv/" frameBorder="0"></iframe>
</div>

NOTA BENE:

No clicks will be registered by the iframe element, so a use-case would be i.e: if by clicking the iframe you want to enlarge it full screen.... Etc...

@Christophe doh, forgot to mention that IE cannot even handle `position` properly... :) (should we even note that) ;) kidding, thanks — Roko C. Buljan, Feb 26 '13 at 03:00
@RickyLevi I think there's no way to do so. If there was one it would be a security / privacy issue. — Roko C. Buljan, Jul 27 '19 at 17:40

score 1 · Answer 3 · answered Feb 26 '13 at 02:58

I got it to work but only after uploading it to a host. I imagine localhost would work fine too.

outer

<html>
   <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script>
        $(document).ready(function() {
            var myFrame = document.getElementById("myFrame");
            $(myFrame.contentWindow.document).find("div").on("click", function () { alert("clicked"); });
        });
    </script>
    <body>
        <iframe id="myFrame" src="inner.htm"></iframe>
    </body>
</html>

inner

<html>
    <head>
        <style>
            div {
                padding:2px;
                border:1px solid black;
                display:inline-block;
            }
        </style>
    </head>
    <body>
        <div>Click Me</div>
    </body>
</html>

3

will be blocked on CORS – Ricky Levi Jul 27 '19 at 15:06

MajkelEight · Answer 4 · 2022-06-30T08:54:25.793

Pure Javascript

Not my solution but only this works well.

let myConfObj = {
  iframeMouseOver : false
}
window.addEventListener('blur',function(){
  if(myConfObj.iframeMouseOver){
    console.log('Wow! Iframe Click!');
  }
});

document.getElementById('YOUR_CONTAINER_ID').addEventListener('mouseover',function(){
   myConfObj.iframeMouseOver = true;
});
document.getElementById('YOUR_CONTAINER_ID').addEventListener('mouseout',function(){
    myConfObj.iframeMouseOver = false;
});

score 0 · Answer 5 · answered Feb 26 '13 at 02:32

$(document).ready(function () {
 $('#left').click(function(event) { alert('test'); });
});

<iframe src="left.html" id="left">Your Browser Does Not Support iframes</iframe>

The script would have to be ran entirely from the iframe. I would recommend a different method of calling content, such as php.

iframes aren't really worth the hassle.

score 0 · Answer 6 · edited Jun 20 '20 at 09:12

0

The actual problem is that, the click event does not bind to the DOM of the iframe and bind() is deprecated, use .on() to bind the event. Try with the following codes and you will find the borders of the iframe clickable getting that alert.

$('#left').on('click', function(event) { alert('test'); });

Demo of that Issue

So how to get it done?

How you should do is, create a function on iframe page, and call that function from that iframe page.

edited Jun 20 '20 at 09:12

Community

1
1

answered Feb 26 '13 at 02:35

Starx

77,474
47
185
261

I see, thank you. I was just wondering, why it appears to work in the example mentioned above (http://stackoverflow.com/questions/1609741/how-to-add-click-event-to-a-iframe-with-jquery). – Evgenij Reznik Feb 26 '13 at 02:43
@RickyLevi, Do you have an example JsFiddle to show? – Starx Aug 21 '19 at 15:42
I just load the link in the comment, and click on the IFRAME, according to that code - an alert should popup ( or maybe I misunderstood the demo ) ... the alert never pops. – Ricky Levi Aug 23 '19 at 16:39

Add click event to iframe

6 Answers6

1. Using `:after`

2. Using `pointer-events:none;`

Pure Javascript

So how to get it done?

Linked

Related

Add click event to iframe

6 Answers6

1. Using :after

2. Using pointer-events:none;

Pure Javascript

So how to get it done?

Linked

Related

1. Using `:after`

2. Using `pointer-events:none;`