如何獲取iframe的完整內容並且能夠對其進行編輯？

我知道你能得到的innerHTML做這樣的事情，與jQuery，如何獲取iframe的完整內容並且能夠對其進行編輯？

$('iframe').load(function(){ 
    alert($(this).contents().find('body').html()); 
});

這得到body標籤的innerHTML。但我想要這一切。我想要HTML標籤和文檔類型。整個源代碼基本上。而且我希望能夠整體編輯它。「作爲一個整體」，我的意思是我想能夠做到這樣的事情，

$('iframe').html('<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html> 
<head> 
    <title>title</title> 
</head> 
<body> 
hello world 
</body> 
</html>');

我該怎麼做？

注意：我意識到DOM在不同瀏覽器中的處理方式不同，因此Opera的innerHTML看起來與Firefox中的不同。但這並不是什麼大事。

來源

2009-09-02 fent

我假設你正在訪問的這個文件是在同一臺服務器上？顯然能夠訪問（和編輯！）另一個網站的內容將是非常危險的。

$('iframe').contentWindow.document.documentElement.outerHTML將包含完整的html標記及其內容。 outerHTML不完全是跨瀏覽器的，您可能想要解析documentElement對象的屬性。請注意，您無法編輯outerHTML（至少在WebKit中），因此您可以使用innerHTML來編輯內容。

$('iframe').contentWindow.document.doctype代表DOCTYPE。您無法獲得實際的標籤，但您可以從其屬性中檢索信息。 Here是！DOCTYPE元素的MSDN參考。

來源

2009-09-02 02:03:12 ACoolie

jQuery的沒有一個'contentWindow'屬性... – geowa4 2009-09-02 03:35:48

也，'documentElement'？布萊恩老學校？ – geowa4 2009-09-02 03:36:33

是的，它在同一臺服務器上。 – fent 2009-09-02 05:55:02

document.write是你的朋友。

例如：

var iframeEl = document.createElement('iframe'); 
document.body.appendChild(iframeEl); 

var oFrame = window.frames[window.frames.length - 1]; 
oFrame.document.write('<html><head><title>foo</title></head><body>bar</body></html>'); 

oFrame.document.body.innerHTML; // "bar"

來源

2009-09-02 02:34:15 kangax

oFrame.document不是X瀏覽器;使用'oFrame.contentDocument || oFrame.contentWindow.document' – geowa4 2009-09-02 03:33:58

@ geowa4不完全。您將'HTMLIframeElement'的'contentDocument'屬性與'Window'對象的'document'屬性混淆 - http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-67133006通過'window.frames'集合）。請注意，我通過iframe的相應窗口對象訪問文檔，而不是通過iframe元素的'contentDocument'屬性。 – kangax 2009-09-02 04:36:45

如何獲取iframe的完整內容並且能夠對其進行編輯？

回答

相關問題