讀取iframe的DOM

Question

與Firebug Inspect類似，我有一段代碼來讀取DOM，並在鼠標懸停時突出顯示當前元素，然后單擊以打印出當前元素的DOM位置。 觀看演示： http : //jsfiddle.net/94EaH/4/

我正在嘗試修改代碼以處理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');
});

但是，如果我再添加一行以修改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為“容器”的div。 如果從父文檔$（'＃container'）執行此操作，則會發現jQuery對象為空。

jQuery綁定到聲明（加載）它的頁面的窗口和文檔對象。 無論是從綁定到iframe的事件處理程序構造它，使用的$函數仍然屬於父窗口。 但是，如果您在iframe的頁面中加載jQuery，則可以獲取對以下對象的引用：

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

在這里，第一個“ $”和第二個“ $”不引用相同的jQuery構造函數。

編輯后，我忘記了[0]來訪問jQuery對象中的第一個iframe。

我希望這可以幫助你。