javascript - 读取 iframe 的 DOM

Question

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

我正在尝试修改代码以处理 iframe 中的内容。我不希望它在当前页面和 iframe 的 DOM 上工作，因为我知道这是行不通的。我想将代码绑定(bind)的选择器更改为 iframe。 iframe 当然嵌入在页面中，但仅分析 iframe 的 DOM。

我可以通过 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 绑定(bind)到声明(加载)它的页面的窗口和文档对象。无论您是从绑定(bind)到 iframe 的事件处理程序构造它，您使用的 $ 函数仍然属于父窗口。但是，如果您在 iframe 页面中加载 jQuery，则可以获得对如下对象的引用:

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

这里，第一个“$”和第二个“$”并不引用同一个 jQuery 构造函数。

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

希望这对您有帮助。