ansaurus

Question

Adding a class to an element in an iframe using jQuery

Answer 1

A:

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 2010-10-21 20:04:03

Didn't have any affect, still nothing.

David B. 2010-10-21 20:11:34

Answer 2

A:

FINAL EDIT:

There are two problems:

Use $('#source').contents() instead of simply using $('#source')
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

Dan Manastireanu 2010-10-21 20:23:26

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. 2010-10-21 20:30:27

You can see live demo here: http://jsfiddle.net/QBVfw/6/

David B. 2010-10-21 20:36:40

@David You can't add your page in the jsFiddle example iframe, since that would be cross site scripting....

Dan Manastireanu 2010-10-21 20:51:18

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. 2010-10-21 20:52:41

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 2010-10-21 20:54:49

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. 2010-10-21 20:55:37

For me `live('click')` works. See http://jsfiddle.net/danmana/QBVfw/11/

Dan Manastireanu 2010-10-21 21:01:23

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 2010-10-21 21:19:23

When I don't declare src="" in <iframe> your demo works. When I do include a src it doesn't work and doesn't display your prepend text either.

David B. 2010-10-21 22:08:28

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 2010-10-21 22:36:34

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 2010-10-21 22:42:56

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. 2010-10-21 23:02:45

ansaurus

tags:

views:

answers:

Adding a class to an element in an iframe using jQuery

FINAL EDIT:

ORIGINAL ANSWER:

EDIT 1:

related questions