使用jQuery将类添加到iframe中的元素

 $('#source').delegate('*', 'hover', function() { $(this).addClass('hover'); }); $('#source').delegate('*', 'mouseout', function() { $(this).removeClass('hover'); }); $('#source').delegate('*', 'click', function() { alert($(this).html()); return false; }); 

当我鼠标hover或点击Iframe内的任何元素时，没有任何反应。 Iframe位于同一个域中，而且我的印象是，只要Iframe src位于同一个域上，它就应该有效。

关于如何使这项工作的任何想法？

Answer 1

最终编辑：

有两个问题：

1. 使用$('#source').contents()而不是简单地使用$('#source')

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

你也应该避免使用.live因为iframes中似乎存在一些问题 （当使用live jQuery时会在文档上绑定特殊的eventHandlers，并在它们冒泡时检查事件）

这是一个工作示例（ jsFiddle链接 ）：

 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('This is a test
Click here'); $c.delegate('b', 'hover', function() { $(this).toggleClass('hover'); }); $c.delegate('b', 'click', function() { alert('You clicked on:' + $(this).text()); }); 

---

原始答案：

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

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

 var doc = window.frames['source'].document; $(doc).ready(function(){ $('body').prepend('This is outside the iframe
'); $('body',doc).prepend('This is inside the iframe
'); }); 

您可以查看此实时jsFiddle示例 。

---

编辑1：

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

例如，如果您使用$(this).css('color':'red')而不是addClass ，它将起作用。 查看更新的jsFiddle

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

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

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

Answer 2

试试这个内容 ：

demo.php：

   ...   
 ... 
   

码：

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