How to add click event in iframe using jQuery

Question

I have an iframe on a page coming from a third party (ad). I would like to fire the click event when this iframe is clicked (to write some native data). Something like:

$('#iframe_id').click(function() { //run function that records clicks }); 

.. based on HTML:

 <iframe id="iframe_id" src="http://something.com"></iframe> 

I can't seem to change it. Thoughts?

Answer 1

There is no 'onclick' event for the iframe, but you can try to catch the document click event in the iframe:

 document.getElementById("iframe_id").contentWindow.document.body.onclick = function() { alert("iframe clicked"); } 

EDIT Although this does not solve the problem of your cross site, FYI jQuery has been updated to play well with iFrames:

 $('#iframe_id').on('click', function(event) { }); 

Update 1/2015 The iframe explanation link has been removed since it is no longer available.

Note The above code will not work if the iframe is from a different domain than the host page. You can still try using the hacks mentioned in the comments.

Answer 2

Try using this: iframeTracker jQuery Plugin , for example:

 jQuery(document).ready(function($){ $('.iframe_wrap iframe').iframeTracker({ blurCallback: function(){ // Do something when iframe is clicked (like firing an XHR request) } }); }); 

Answer 3

I was trying to find a better answer that was more autonomous, so I started thinking about how jQuery executes events and custom events. Since a click (from JQuery) is just any event, I thought that all I needed to do was trigger an event, given that the contents of the iframe were clicked on it. So that was my decision

 $(document).ready(function () { $("iframe").each(function () { //Using closures to capture each one var iframe = $(this); iframe.on("load", function () { //Make sure it is fully loaded iframe.contents().click(function (event) { iframe.trigger("click"); }); }); iframe.click(function () { //Handle what you need it to do }); }); }); 

Answer 4

See this:

 var iframe = $('#your_iframe').contents(); iframe.find('your_clicable_item').click(function(event){ console.log('work fine'); }); 

Answer 5

None of the suggested answers worked for me. I solved a similar case as follows:

 <a href="http://my-target-url.com" id="iframe-wrapper"></a> <iframe id="iframe_id" src="http://something.com" allowtrancparency="yes" frameborder="o"></iframe> 

css (of course, the exact positioning should change in accordance with the requirements of the application):

 #iframe-wrapper, iframe#iframe_id { width: 162px; border: none; height: 21px; position: absolute; top: 3px; left: 398px; } #alerts-wrapper { z-index: 1000; } 

Of course, now you can catch any event in the iframe shell.

Answer 6

You can use this code to bind by clicking on the element that is in the iframe.

 jQuery('.class_in_iframe',jQuery('[id="id_of_iframe"]')[0].contentWindow.document.body).on('click',function(){ console.log("triggered !!") }); 

Answer 7

This might be interesting for ppl using Primefaces (which uses CLEditor):

 document.getElementById('form:somecontainer:editor') .getElementsByTagName('iframe')[0].contentWindow .document.onclick = function(){//do something} 

Basically, I just picked up the answer from Traveling Tech Guy and changed the selection a bit .;)

Answer 8

Solution that works for me:

 var editorInstance = CKEDITOR.instances[this.editorId]; editorInstance.on('focus', function(e) { console.log("tadaaa"); });