如何在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的正文内容？

回答

相关问题