1
<iframe src="/demo.php" id="source"></iframe>

$('#source').delegate('*', 'hover', function() {
    $(this).addClass('hover');  
});

$('#source').delegate('*', 'mouseout', function() {
    $(this).removeClass('hover');   
});

$('#source').delegate('*', 'click', function() {
    alert($(this).html());
    return false;
});

Nothing happens when I mouseover or click on any element inside of the Iframe. The Iframe is on the same domain and I was/am under the impression that as long as the Iframe src is on the same domain it should work.

Any ideas on how to make this work?

David B.
  • 214
  • 2
  • 4
  • 14

2 Answers2

7

FINAL EDIT:

There are two problems:

  1. Use $('#source').contents() instead of simply using $('#source')

  2. The css rule for .hover is not visible in the context of the iframe.
    Either use .css() to set style directly, add the css links in demo.php or clone all styles in the main document into the iframe with jQuery.

Also you should avoid .live as there seem to be some issues inside iframes (when using live jQuery binds special eventHandlers on the document, and checks events when they bubble up)

Here is a working example (jsFiddle link):

var $c = $('#source').contents();

//clone all styles from this document into the iframe
$c.find('head').append($('style, link[rel=stylesheet]').clone());

$c.find('body').prepend('<b>This is a test</b><br><b>Click here</b>');

$c.delegate('b', 'hover', function() {
    $(this).toggleClass('hover');
});

$c.delegate('b', 'click', function() {
    alert('You clicked on:' + $(this).text());
});

ORIGINAL ANSWER:

Your problem is that you are using the iframe as context. You should use the frame document instead.

Also just for safety you might want to add your code in the onload event like this:

var doc = window.frames['source'].document;
$(doc).ready(function(){
    $('body').prepend('This is outside the iframe<br>');
    $('body',doc).prepend('This is inside the iframe<br>');
});

You can view this live jsFiddle example.

EDIT 1:

Ok, so the actual problem is that the css styles are not visible within the iframe.

For example if you use $(this).css('color':'red') instead of addClass it would work. See the updated jsFiddle

What I suggest is either to have the correct css styles already in demo.php or inserted afterwards like so:

$('head',doc).append($('style, link[rel=stylesheet]').clone());

updated jsFiddle - with addClass and cloning of styles

Community
  • 1
  • 1
Dan Manastireanu
  • 1,802
  • 1
  • 15
  • 18
  • var doc = window.frames['source'].document; $(doc).ready(function(){ $('body',doc).delegate('*', 'hover', function() { $(this).addClass('hover'); }); }); That code doesn't work, however prepend does insert text into the Iframe like in your example. – David B. Oct 21 '10 at 20:30
  • @David You can't add your page in the jsFiddle example iframe, since that would be cross site scripting.... – Dan Manastireanu Oct 21 '10 at 20:51
  • Oh yeah, I forgot, mindslip. However, it doesn't work on my local version either without the XSS issue. I can't get it to do anything on hover or click. – David B. Oct 21 '10 at 20:52
  • Have you looked at the updated jsFiddle? I think the problem is that the hover class is not present in any css/style visible inside the iframe – Dan Manastireanu Oct 21 '10 at 20:54
  • I can't get it to alert('a') on click either. var doc = window.frames['source'].document; $(doc).ready(function() { $('body',doc).live('click', function() { alert('a'); }); }); – David B. Oct 21 '10 at 20:55
  • Apparently `window.frames['source']` doesn't work in Firefox, which I'm guessing is what you are using. Using `var doc = $('#source').contents();` instead works both in Firefox and Chrome. Is this working for you ? http://jsfiddle.net/danmana/QBVfw/12/ – Dan Manastireanu Oct 21 '10 at 21:19
  • When I don't declare src="" in – David B. Oct 21 '10 at 22:08
  • Running the code I posted above in the firebug console (after the page is fully loaded) works. I suspect that the problem is that when you run the script the document of the iframe is not fully loaded. You might want to take look at this post, and `$.frameReady`: http://stackoverflow.com/questions/205087/jquery-ready-in-a-dynamically-inserted-iframe/205221#205221 – Dan Manastireanu Oct 21 '10 at 22:36
  • Maybe putting the code inside `$c.ready(function(){...})` or `$c.bind('load',function(){...})` might also work... Lastly if nothing else works you might put it in a timeout: `window.setTimeout(function(){...},2000)`. Just make sure the timeout is big enought such that the iframe has time to load – Dan Manastireanu Oct 21 '10 at 22:42
  • I got it working for the most part, kind of buggy but I'll take it for now! I used pretty much a mashup of all of your suggestions to finally get it working. I really appreciate your help! You're a true asset here so thank you!! – David B. Oct 21 '10 at 23:02
0

try with this contents:

demo.php:

<html>
<head>
...
</head>
<body>
<div id="container-div">
...
</div>
</body>
</html>

code:

<iframe src="/demo.php" id="source"></iframe>

$('#source').contents().delegate('container-div', 'hover', function() {
    $(this).addClass('hover');  
});

$('#source').contents().delegate('container-div', 'mouseout', function() {
    $(this).removeClass('hover');   
});

$('#source').contents().delegate('container-div', 'click', function() {
    alert($(this).html());
    return false;
});
andres descalzo
  • 14,887
  • 13
  • 64
  • 115