Javascript 读取iframe'；多姆

与Firebug Inspect类似，我有一段代码来读取DOM，鼠标悬停时高亮显示当前元素，然后单击打印出当前元素的DOM位置。请参见演示：

我正在尝试修改代码以处理iframe中的内容。我不希望它在当前页面和iframe的DOM上工作，因为我知道这不起作用。我想将代码绑定到的选择器更改为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');
});

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

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

关于如何将此功能扩展到iframe的DOM而不是示例中使用的当前页面的#container元素，有什么想法吗

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

---

如果您试图从父窗口使用jQuery访问Iframe中的元素，则会出现问题。想象一下你有一个iframe。在iframe内部，有一个id为“container”的div。如果从父文档$（“#container”）执行此操作，您将发现jQuery对象为空

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

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

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

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

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

---

我希望这对您有所帮助。

对于

event.target

要工作，您需要接受

event

作为单击回调的参数<代码>“单击”，函数（事件）{同样，要操作iframe内容，您需要执行-

$（“#testFrame”）.contents（）.find（'#iframeDiv'）.css（等）