使用jQuery向iframe中的元素添加类

当我将鼠标悬停或单击Iframe内部的任何元素时，不会发生任何事情。Iframe在同一个域上，我的印象是，只要Iframe src在同一个域上，它就应该工作

关于如何使这项工作有效，你有什么想法吗？

试试这个：

demo.php：

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

代码：

试试这个：

demo.php：

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

代码：

最终编辑： 有两个问题：

使用$'source'。内容而不是简单地使用$'source'

.hover的css规则在iframe的上下文中不可见。 使用.css直接设置样式，在demo.php中添加css链接，或者使用jQuery将主文档中的所有样式克隆到iframe中

此外，您还应该避免.live，因为在使用live jQuery时，iframe中似乎有一些事件绑定文档上的特殊事件处理程序，并在事件冒泡时检查事件

以下是一个工作示例：

-使用addClass和样式克隆

最终编辑： 有两个问题：

使用$'source'。内容而不是简单地使用$'source'

.hover的css规则在iframe的上下文中不可见。 使用.css直接设置样式，在demo.php中添加css链接，或者使用jQuery将主文档中的所有样式克隆到iframe中

此外，您还应该避免.live，因为在使用live jQuery时，iframe中似乎有一些事件绑定文档上的特殊事件处理程序，并在事件冒泡时检查事件

以下是一个工作示例：

---

-使用addClass和样式克隆

没有任何影响，仍然没有。没有任何影响，仍然没有。var doc=window.frames['source'].doc；$doc.readyfunction{$'body'，doc.delegate'*'，'hover'，function{$this.addClass'hover'；}；}；该代码不起作用，但是prepend会像您的示例一样将文本插入Iframe。@David您不能在JSFIDLE示例Iframe中添加页面，因为这将是跨站点脚本编写……哦，是的，我忘了，mindslip。但是，如果没有XSS问题，它在我的本地版本上也不起作用。我无法让它在悬停或单击时执行任何操作。您看过更新的JSFIDLE吗？我认为问题是hover类在iframe中任何可见的css/样式中都不存在，我也无法让它在单击时发出警告“a”。var doc=window.frames['source'].document$doc.readyfunction{$'body'，doc.live'click'，函数{alert'a'；}；}；var doc=window.frames['source'].document；$doc.readyfunction{$'body'，doc.delegate'*'，'hover'，function{$this.addClass'hover'；}；}；该代码不起作用，但是prepend会像您的示例一样将文本插入Iframe。@David您不能在JSFIDLE示例Iframe中添加页面，因为这将是跨站点脚本编写……哦，是的，我忘了，mindslip。但是，如果没有XSS问题，它在我的本地版本上也不起作用。我无法让它在悬停或单击时执行任何操作。您看过更新的JSFIDLE吗？我认为问题是hover类在iframe中任何可见的css/样式中都不存在，我也无法让它在单击时发出警告“a”。var doc=window.frames['source'].document$doc.readyfunction{$'body'，doc.live'click'，函数{alert'a'；}；}；

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

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

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

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