Question

与Firebug Inspect类似，我有一个代码块来读取DOM，并在鼠标悬停时突出显示当前元素，并在单击时打印出当前元素的DOM位置。看演示： http://jsfiddle.net/94EaH/4/

我正在尝试修改代码以处理iframe中的内容。我不希望它在当前页面和iframe的DOM上工作，因为我知道它不起作用。我想更改代码绑定的选择器，成为iframe。 iframe当然嵌入在页面中，但只有iframe的DOM正在被分析。

我可以像if这样通过iframe操纵父级：

<iframe id="testFrame" src="blah.html" width="200px" height="200px"></iframe>
<div id="testBox">text text text</div>

$("#testFrame").contents().bind("click", function() {
   $('#testBox').css('color', 'green');
});

但是，如果我再添加一行来修改iframe中的DIV内容..没有。

$("#testFrame").contents().bind("click", function() {
   $('#testBox').css('color', 'green');
   $('#iframeDiv').css('color', 'red'); //this produces no result
   console.log(event.target); // I get no information out of this also..
});

http://jsfiddle.net/94EaH/3/

很难显示完整的功能，因为blah.html（iframe源代码）无法在jsfiddle上显示..

关于如何将此功能扩展到iframe的DOM而不是我在示例中使用的当前页面的#container元素的任何想法？

iframe文件位于同一台服务器上，因此没有安全问题

Answer 1

如果您尝试使用父窗口中的jQuery访问iframe中的元素，那么您就遇到了问题。想象一下，你有一个iframe。在iframe中，有一个id为'container'的div。如果从父文档$（'＃container'）执行此操作，您将发现jQuery对象为空。

jQuery绑定到声明（加载）它的页面的窗口和文档对象。无论你是从绑定到iframe的事件处理程序构造它，你正在使用的$函数仍然属于父窗口。但是，如果在iframe的页面中加载jQuery，则可以获得对象的引用，如下所示：

$('#testFrame')[0].contentWindow.$('#container');

这里，第一个'$'和第二个'$'不是指同一个jQuery构造函数。

已编辑我忘记了 [0] 来访问jQuery对象中的第一个iframe。

我希望这会对你有所帮助。

阅读iframe的DOM

1 个答案: