CODEWITHSUNDEEP
javascriptjqueryiframe
Evgenij Reznik
Evgenij Reznik

Reputation: 18614

Add click event to iframe

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">

Upvotes: 18

Views: 116084

Answers (7)

Philip Skird
Philip Skird

Reputation: 1

  var iframe = document.getElementById("myFrame");
  var elmnt = iframe.contentWindow.document.getElementsByTagName("button")[0];

elmnt.click();

wenn man klick in einem Frame simulieren will muss man die var "iframe" nennen.

Upvotes: 0

Roko C. Buljan
Roko C. Buljan

Reputation: 206618

Two solutions:

  1. Using :after on a .iframeWrapper element
  2. 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...

Upvotes: 23

MajkelEight
MajkelEight

Reputation: 107

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;
});

Upvotes: 1

Christophe
Christophe

Reputation: 28174

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/

Upvotes: 32

user2102611
user2102611

Reputation:

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>

Upvotes: 1

Starx
Starx

Reputation: 79049

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.

Upvotes: 0

Casey Dwayne
Casey Dwayne

Reputation: 2169

$(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.

Upvotes: 0

Related Questions