Add Click Event to Iframe

Add click event to iframe

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/

Adding click event handler to iframe

You can use closures to pass parameters:

iframe.document.addEventListener('click', function(event) {clic(this.id);}, false);

However, I recommend that you use a better approach to access your frame (I can only assume that you are using the DOM0 way of accessing frame windows by their name - something that is only kept around for backwards compatibility):

document.getElementById("myFrame").contentDocument.addEventListener(...);

addEventListener to iFrame

This will work:

 $('#myIFrame').load(function(){
     //then set up some access points
     var contents = $(this).contents(); // contents of the iframe
     $(contents).find("body").on('mouseup', function(event) { 
         alert('test'); 
     });
 });

How to add click event to the dynamic element of an iframe?

Explanation:- Since you are trying to add a event on dynamically created element inside an iframe, so you have to bind it through parent reference.

That means based on parent element try to find-out the dynamically added element and then add event on it.(as jQuery din't recognise dynamically added element directly)

So do it like below:-

$("#composer_frame").contents().find('#myAnch').on("click", function (e) {
    e.preventDefault();
    alert('clicked');
});

Working snippet:-https://jsfiddle.net/sycf9nz6/

This is called event-delegation

iFrame: using jQuery to add click event to button

Try this $iframe.contents()[0].getElementById("dog").addEventListener("click", function() {
getDog()
});

But this only works in iframes hosted in the same domain.

How to add a click event to p elements in iframe (using jQuery)

There's a special jQuery function that does that: .contents(). See the example for how it's works.

jQuery: click event inside iframe

When you have the iframe on the same domain, you can use this script to catch clicks in the iframe. Don't use .live, it is depriciated as of jQuery 1.7.

var iframeBody = $('body', $('#iframe')[0].contentWindow.document);
$(iframeBody).on('click', 'img', function(event) {
    doSomething();
});

You can manipulate the body through the iframeBody variable.

Detect Click into Iframe using JavaScript

Is something like this possible?

No. All you can do is detect the mouse going into the iframe, and potentially (though not reliably) when it comes back out (ie. trying to work out the difference between the pointer passing over the ad on its way somewhere else versus lingering on the ad).

I imagine a scenario where there is an invisible div on top of the iframe and the the div will just then pass the click event to the iframe.

Nope, there is no way to fake a click event.

By catching the mousedown you'd prevent the original click from getting to the iframe. If you could determine when the mouse button was about to be pressed you could try to get the invisible div out of the way so that the click would go through... but there is also no event that fires just before a mousedown.

You could try to guess, for example by looking to see if the pointer has come to rest, guessing a click might be about to come. But it's totally unreliable, and if you fail you've just lost yourself a click-through.

---

Related Topics