使用jQuery将类添加到iframe中的元素 [英] Adding a class to an element in an iframe using jQuery

问题描述

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

当鼠标悬停或点击Iframe内的任何元素时，没有任何反应。 Iframe位于同一个域中，我觉得只要iframe src在同一个域上就可以使用。

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.

关于如何使用iframe使这项工作？

Any ideas on how to make this work?

推荐答案

最终编辑：

有两个问题：

FINAL

There are two problems:

1. 使用 $（'＃source'）。contents（）而不是简单地使用 $（'＃source'）

css规则code> .hover 在iframe的上下文中不可见。

使用 .css（）直接设置样式，在 demo.php 中添加css链接，或者使用jQuery将主文档中的所有样式克隆到iframe中。

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.

此外，您应该避免 .live ，因为似乎一些问题（当使用live jQuery绑定文档上的特殊eventHandlers时，并且当它们冒泡时检查事件）

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)

这是一个有效的例子（ jsFiddle链接）：

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

---

原始答案：

您的问题是您使用iframe作为上下文。您应该使用框架文档。

---

ORIGINAL ANSWER:

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

另外，为了安全起见，您可能希望在onload事件中添加代码，如下所示：

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

你可以查看这个 live jsFiddle示例。

好的，所以实际问题是在iframe中看不到css样式。

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

例如，如果你使用 $（this）.css（'color'：'red'）而不是 addClass 它会起作用。查看更新的jsFiddle

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

我建议要么在 demo.php 中插入正确的css样式，要么插入之后如下：

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

更新了jsFiddle - 使用addClass和克隆样式

updated jsFiddle - with addClass and cloning of styles

这篇关于使用jQuery将类添加到iframe中的元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！