1

So I have an iframe, and I would like to be able to do something like an alert whenever a specific button in the iframe is clicked. But the following code does not work

$('.class_name').click(function(){
    alert('Clicked');    
});

in fact, it wont even alert when the iframe is clicked (which is the same code as above, but where .class_name becomes iframe).

I looked at the solution from this question, and it still did not work!

This is a jsfiddle that should demonstrate the issue pretty well.

So my question is: Why wont Jquery recognize when anything inside the iframe, as well as the actual iframe, is clicked?

Edit:

I understand that I cannot communicate with an iframe on a different domain, so my jsfiddle wont work...but it doesn't work on the site where I am hosting it on the same domain as the iframe...

Community
  • 1
  • 1
Ryan Saxe
  • 14,833
  • 19
  • 66
  • 116

2 Answers2

2

If your iframe is coming from a different domain, as in your fiddle, then your JavaScript code has no access to its contents at all, sorry!

As @Max poins out, you can use postMessage() or the URL fragment hack to communicate with an iframe in a different domain, if there is code in that iframe to handle this communication from that side.

With an iframe from tumblr.com, you could check their documentation to see if it talks about using this page in an iframe and communicating with it across the domain barrier.

Now if you're talking about an iframe from the same domain as your page, then it's easy. Given an iframe element in a variable named myframe, you can use myframe.contentWindow to get its window object and myframe.contentWindow.document to get its document object. From there you can do the things you need. For example:

var $myframe = $('#myframe'),
    myframe = $myframe[0],
    myframewin = myframe.contentWindow,
    myframedoc = myframewin.document;

$(myframedoc).find('a').on( 'click', function() {
    alert( 'Clicked!' );
});

You may still have some trouble using a copy of jQuery in the main page to access things in the iframe, but should have better luck with the latest versions. Worst case you can use native DOM events and methods for this, but jQuery does work in this updated fiddle.

This fiddle uses document.write to put content in the iframe, but the jQuery code accessing the frame would be the same either way. The one thing to watch out for, of course, is whether the iframe has been completely loaded when you try to access it.

I think you can listen for a load event on the iframe element in the containing page, but worst case you could use setTimeout() or setInterval() and wait for the elements you're looking for to become available.

Michael Geary
  • 26,814
  • 8
  • 56
  • 71
  • updated my answer...jsfiddle may not work, but it still is giving me trouble on a site with the same domain as the iframe. Also, it should then still be able to alert when the iframe itself is clicked, right? because that has nothing to do with what the iframe content is! – Ryan Saxe Jun 20 '13 at 22:11
  • Please don't use Google for reference. Point to a specific site (wikipedia should be fine) – John Dvorak Jun 20 '13 at 22:15
0

Because the iFrame is a completely different frame- it's done out of security concerns. For example, imagine if you could load a banks login page in an iFrame, and use js to get the field values.

With different domains especially, it is much harder to communicate with JS- this should get you started: How to communicate between iframe and the parent site?

Community
  • 1
  • 1
Max
  • 1,915
  • 17
  • 20
  • updated my answer...jsfiddle may not work, but it still is giving me trouble on a site with the same domain as the iframe – Ryan Saxe Jun 20 '13 at 22:09
  • Also, it should then still be able to alert when the iframe itself is clicked, right? because that has nothing to do with what the iframe content is! – Ryan Saxe Jun 20 '13 at 22:15
  • @RyanSaxe no. That click belongs to the iFrame document, not yours. – John Dvorak Jun 20 '13 at 22:16