Adding a class to an element in an iframe using jQ

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

标签： jquery iframe

2条回答

对你真心纯属浪费

2楼-- · 2019-06-05 00:20

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

0人赞添加讨论(0) 举报

叛逆

3楼-- · 2019-06-05 00:27

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

0人赞添加讨论(0) 举报