如何在Javascript中獲取iframe的正文內容？

113

<iframe id="id_description_iframe" class="rte-zone" height="200" frameborder="0" title="description"> 
    <html> 
    <head></head> 
    <body class="frameBody"> 
     test<br/> 
    </body> 
    </html> 
</iframe>

我想要得到的是：如何在Javascript中獲取iframe的正文內容？

test<br/>

來源

2009-05-29 omg

+27

重要注意事項：如果iFrame的內容是跨域的，則無法訪問它。參見[同源策略]（http://en.wikipedia.org/wiki/Same-origin_policy）。 – 2014-01-01 01:42:05

我想放置文本插圖中的標籤被保留爲不能處理的I幀ie瀏覽器..

<iframe src ="html_intro.asp" width="100%" height="300"> 
    <p>Your browser does not support iframes.</p> 
</iframe>

您可以使用 'SRC'屬性來設置內嵌框架html的來源...

希望可以幫到:)

來源

2009-05-29 16:37:55

一些現代瀏覽器在特定的Web Developer Toolbar（例如Chrome上的WebInspector）中顯示Iframe-Tag之間的Iframe-Content-Html。 – algorhythm 2013-06-18 12:33:36

Chalkey是正確的，您需要使用src屬性來指定要包含在iframe中的頁面。提供你這樣做，並在iframe該文件是在同一個域中的父文檔，您可以使用此：

var e = document.getElementById("id_description_iframe"); 
if(e != null) { 
    alert(e.contentWindow.document.body.innerHTML); 
}

很明顯，你就可以做一些與內容有用，而不是僅僅把他們在警報。

來源

2009-05-29 16:48:47

這隻適用於IE。它在FF中引發錯誤。 – ichiban 2009-05-29 16:57:14

+1解決了我的問題，使用JS自動保存telerik控制 – Savaratkar 2013-12-17 04:31:10

AFAIK，Iframe不能這樣使用。您需要將其src屬性指向另一個頁面。

下面介紹如何使用平面舊的javascript來獲得它的主體內容。這適用於IE和Firefox。

function getFrameContents(){ 
    var iFrame = document.getElementById('id_description_iframe'); 
    var iFrameBody; 
    if (iFrame.contentDocument) 
    { // FF 
    iFrameBody = iFrame.contentDocument.getElementsByTagName('body')[0]; 
    } 
    else if (iFrame.contentWindow) 
    { // IE 
    iFrameBody = iFrame.contentWindow.document.getElementsByTagName('body')[0]; 
    } 
    alert(iFrameBody.innerHTML); 
}

來源

2009-05-29 16:52:12

它不適用於Chrome。 – Kane 2011-09-01 05:49:29

它在safari（即分支）上執行 – 2012-10-18 14:54:32

使用jQuery，試試這個：

$("#id_description_iframe").contents().find("body").html()

來源

2010-01-26 17:05:19

這不起作用 – 2012-06-20 09:44:04

+22

它不起作用，因爲*「域，協議和端口必須匹配」。*：不安全的JavaScript嘗試訪問帶有URL的幀 – 2013-05-16 15:46:09

下面的代碼是跨瀏覽器兼容。它適用於IE7，IE8，Fx 3，Safari和Chrome，因此無需處理跨瀏覽器問題。沒有在IE6中測試。

<iframe id="iframeId" name="iframeId">...</iframe> 

<script type="text/javascript"> 
    var iframeDoc; 
    if (window.frames && window.frames.iframeId && 
     (iframeDoc = window.frames.iframeId.document)) { 
     var iframeBody = iframeDoc.body; 
     var ifromContent = iframeBody.innerHTML; 
    } 
</script>

來源

2010-03-02 00:00:11 nekno

使用content在IFRAME與JS：

document.getElementById('id_iframe').contentWindow.document.write('content');

來源

2011-11-19 14:07:13 CoursesWeb

它完美對我來說：

document.getElementById('iframe_id').contentWindow.document.body.innerHTML;

來源

2012-05-27 05:51:58 bizzr3

111

確切的問題是如何使用純JavaScript不使用jQuery做。

我一直使用可以在jQuery的源代碼中找到了解決辦法。這只是一行和純JavaScript。

對我來說這是最好的，甚至得到I幀內容的最短途徑。

首先讓你的iframe：

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

// or 
var iframe = document.querySelector('#id_description_iframe');

然後使用jQuery的解決方案：

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

它的工作原理，即使在Internet Explorer中該iframe對象的contentWindow財產過程中做到這一點伎倆。大多數其他瀏覽器使用contentDocument屬性，這就是爲什麼我們在此OR條件中首先證明此屬性的原因。如果沒有設置，請嘗試contentWindow.document。

然後通常可以使用getElementById()甚至querySelectorAll()從一個iframeDocument選擇DOM的元素：

var iframeContent; 

if (iframeDocument) { 
    iframeContent = iframeDocument.getElementById('frameBody'); 

    // or 
    iframeContent = iframeDocument.querySelectorAll('#frameBody'); 
}

通話功能在iframe

從得到公正的window元素iframe來調用一些全局函數，變量或整個庫（例如jQuery）：

var iframeWindow = iframe.contentWindow; 

if (iframeWindow) { 
    // you can even call jQuery or other frameworks if it is loaded inside the iframe 
    iframeContent = iframeWindow.jQuery('#frameBody'); 

    // or 
    iframeContent = iframeWindow.$('#frameBody'); 

    // or even use any other global variable 
    iframeWindow.inside_iframe_variable = window.outside_iframe_variable; 

    // or call a global function 
    var myReturnValue = iframeWindow.globalFunction(withParam); 
}

注意

這一切，如果你觀察same-origin policy是可能的。

來源

2012-06-19 19:26:52 algorhythm

如何在Javascript中獲取iframe的正文內容？

回答

相關問題