Adding a class to an element in an iframe using jQuery

Question

<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?

Community · Accepted Answer · 2020-06-20 09:12:55Z

7

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

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Oct 21, 2010 at 20:23

Dan Manastireanu

1,8221 gold badge15 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

10 Comments

David B. Over a year ago

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.

Dan Manastireanu Over a year ago

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

David B. Over a year ago

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.

Dan Manastireanu Over a year ago

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

David B. Over a year ago

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'); }); });

|

andres descalzo · Accepted Answer · 2010-10-21 20:04:03Z

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;
});

answered Oct 21, 2010 at 20:04

andres descalzo

15k14 gold badges66 silver badges119 bronze badges

1 Comment

David B. Over a year ago

Didn't have any affect, still nothing.

Collectives™ on Stack Overflow

Adding a class to an element in an iframe using jQuery

2 Answers 2

FINAL EDIT:

ORIGINAL ANSWER:

EDIT 1:

10 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

FINAL EDIT:

ORIGINAL ANSWER:

EDIT 1:

10 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related