如何獲取JavaScript中的iframe元素內的元素？

我在文檔裏面有一個元素，我可以通過document.getElementById('iframe_id')得到iframe元素，但是如何獲取這個iframe中的元素？我試過iframeElement.contentWindow，而返回的DOMWindow沒有任何屬性。也試過iframeElement.docuemnt和iframeElement.contentDocument，他們都沒有定義。我怎麼才能得到它？我在我的實驗中使用了最新的Chrome。如何獲取JavaScript中的iframe元素內的元素？

這裏是iframe元素

<iframe id='iframe_id'> 
<html> 
<body>many content here</body> 
</html> 
</iframe>

來源

2011-10-20 Thomson

是你的頁面和來自同一個域的iframe中的頁面嗎？如果沒有，鉻可能不會讓你訪問其他的DOM。 – Tetaxa

@Tetaxa，如何檢查iframe的域名？他們很可能來自不同的領域。 – Thomson

url的第一部分。如果頁面在同一臺服務器上，則應該沒問題。 – Tetaxa

你只能在iframe詢問的內容，如果內容具有相同的協議，域和端口號進行訪問詢問它的腳本。它被稱爲SAME ORIGIN

如果是這樣的話，那麼這段代碼將顯示內容。如果沒有 - 你不能從一個正常的腳本訪問的iframe在一個普通的HTML頁面

Demo - 在IE8，Chrome瀏覽器13和FX6

function showIframeContent(id) { 
    var iframe = document.getElementById(id); 
    try { 
     var doc = (iframe.contentDocument)? iframe.contentDocument: iframe.contentWindow.document; 
     alert(doc.body.innerHTML); 
    } 
    catch(e) { 
     alert(e.message); 
    } 
    return false; 
} 


<iframe id='iframe_id1' src="javascript:parent.somehtml()"> </iframe> 
<br/> 
<a href="#" onclick="return showIframeContent('iframe_id1')">Show</a> 
<hr/> 

<iframe id='iframe_id2' src="http://plungjan.name/"> </iframe> 
<br/> 
<a href="#" onclick="return showIframeContent('iframe_id2')">Show</a> 
<hr/>

來源

2011-10-20 13:30:12 mplungjan

上面的示例HTML只是摘自Chrome底部的元素窗口摘錄（簡化）。它顯示iframe中有完整的html。你的意思是在UI中這是假的？ – Thomson

是的。無論如何，如果頁面來自同一臺服務器，那麼我的代碼就可以工作。請參閱關於相同來源的更新 – mplungjan

還有'doc' undefine，很奇怪。 – Thomson

您應該能夠通過document.getElementById('yourIFrame').document.getElementById('yourElement')

來源

2011-10-20 13:27:42 dwalldorf

測試有：

var iframe = document.getElementById('iframe_id');

要獲得您可以使用的內容文件：

var contDoc = iframe.contentDocument || iframe.contentWindow.document;

然後你可以搜索你的元素insid通過ID訪問iframe。

來源

2011-10-20 13:30:51

我想這應該工作。但是在我運行2條語句後，我得到了contDoc undefined。返回的iframe似乎是正確的。 – Thomson

@Thomson：除非將iframe源設置爲另一個域，否則它將工作。 –

我正在獲取_Uncaught DOMException：阻止了源自「http://example.com」的框架訪問跨源幀._任何提示？ –

如何獲取JavaScript中的iframe元素內的元素？

回答

相關問題