如何在Javascript中获取iframe的内容？

154

<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>

我想要得到的是：

test<br/>

javascript html iframe

— 我的天啊
source

52

重要说明：如果iFrame是跨域的，则无法访问它的内容。请参阅“ 同源政策”。

— HellaMad 2014年

154

确切的问题是如何使用纯JavaScript而不是jQuery。

但是我总是使用可在jQuery源代码中找到的解决方案。这只是本机JavaScript的一行。

对我来说，这是获取iframe内容的最好，最容易理解的方法，甚至是最短的方法。

首先获取您的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中也可以使用，Internet Explorer contentWindow在iframe对象的属性期间执行此操作。大多数其他浏览器都使用该contentDocument属性，这就是我们在此OR条件下首先证明此属性的原因。如果未设置，请尝试contentWindow.document。

在iframe中选择元素

然后，您通常可以使用getElementById()甚至querySelectorAll()从以下选项中选择DOM元素iframeDocument：

if (!iframeDocument) {
    throw "iframe couldn't be found in DOM.";
}

var iframeContent = iframeDocument.getElementById('frameBody');

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

iframe中的调用函数

仅从中获取window元素iframe即可调用一些全局函数，变量或整个库（例如jQuery）：

var iframeWindow = iframe.contentWindow;

// 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.myVar = window.myVar;

// or call a global function
var myVar = iframeWindow.myFunction(param1 /*, ... */);

注意

如果遵守同源策略，则所有这一切都是可能的。

— 算法
source

2

iframe在这里未定义，您应该编写完整的代码还是不应该使用它编写jQuery

— Tarun Gupta 2013年

13

请原谅，但是代码行是jquery代码的摘录，而代码块是我自己的示例代码。剩下的应该有人出来。您唯一缺少的是变量iframe。而且我可能无法知道您的iframe在哪里或它的ID如何。

— 2013年

5

您能否在答案的顶部添加警告，如果iframe具有远程src，则该警告将不起作用？如果我弄错了，不胜感激，如果您能指出我如何仍能在不发送另一个HTTP请求的情况下获取iframe内容（不可能，因为我需要执行javascript来构造iframe内容，并且不想部署第二个JavaScript环境（如果可以避免）。

— Zackline '16

1

我有这样的警告。但最后我的解释。您必须遵守同源政策。就这样。

— algorhythm

2

为了使上述工作正常进行，我必须将其封装在 document.querySelector('#id_description_iframe').onload = function() {... 希望对某人有帮助的地方。

— user3442612

71

使用JQuery，请尝试以下操作：

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

— 迈克尔·阿德达约（Michael Adedayo）
source

27

它不起作用，因为“域，协议和端口必须匹配”。：不安全的JavaScript尝试与URL访问框架

— 尼卡比曹

2

如前所述，如果域匹配，它将起作用。仅供参考，我刚刚发现$（“＃id_description_iframe #id_of_iframe_body”）。html（）在Chrome浏览器中可以运行，但不适用于所有的Firefox版本，因此使用上述方法就可以了。。即$（ “＃id_description_iframe #id_of_iframe_body”）的内容（）找到（ “身体”）HTML（）做了两个工作

— hobailey

41

它非常适合我：

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

— bizzr3
source

3

这很奇怪，但是对我来说.body却行不通。但是.getElementsByTagName('body')[0]确实如此。

— 珍妮·奥雷利

它不是“ .body”，而只是“ body”。删除点

— Arjun

1

如果您喜欢香草javascript，这应该是答案。

— Jovanni G

23

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);
 }

— 何塞·巴西里奥（Jose Basilio）
source

1

它在野生动物园（即分支机构）上做

— Andrei Cristian Prodan 2012年

遇到跨域问题，阻止了源为“ someOther.com ” 的框架访问跨域框架。

— lannyf '18

10

使用contentiframe中与JS：

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

— CoursesWeb
source

5

我认为在标记之间放置文字是为无法处理iframe的浏览器保留的，即。

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

您可以使用“ src”属性设置iframe html的来源...

希望有帮助:)

3

以下代码是跨浏览器兼容的。它可以在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>

— Nekno
source

下面的html在Mac上的Chrome 7中对我有用。我在Windows 6上的Chrome 6中测试了此原始帖子，效果很好。<html> <head> </ head> <body> <iframe id =“ iframeId” name =“ iframeId”> ... </ iframe> <script type =“ text / javascript”> var iframeDoc; 如果（window.frames && window.frames.iframeId && window.frames.iframeId.document）{window.frames.iframeId.document.body.innerHTML =“ <h1>测试</ h1>”; } </ script> </ body> </ html>

— nekno

1

window.frames.iframeId.document对我来说是不确定的。（Ubuntu的13.04，铬）

— 尼卡比曹

2

Chalkey是正确的，您需要使用src属性来指定要包含在iframe中的页面。如果您执行此操作，并且iframe中的文档与父文档位于同一域中，则可以使用以下方法：

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

显然，您可以对内容进行一些有用的操作，而不仅仅是将其置于警报中。

— 格雷厄姆·克拉克（Graham Clark）
source

1

为了从javascript获取正文，我尝试了以下代码：

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

var frameContent = frameObj.contentWindow.document.body.innerHTML;

其中“ id_description_iframe”是您iframe的ID。这段代码对我来说很好用。

— ak
source

2

请始终将您的答案放在上下文中，而不仅仅是粘贴代码。有关更多详细信息，请参见此处。

— gehbiszumeis

1

仅代码答案被认为是低质量的：确保提供解释代码的作用以及如何解决问题。如果您可以在帖子中添加更多信息，它将对询问者和将来的读者都有帮助。又见解释完全基于代码的答案：meta.stackexchange.com/questions/114762/...

— borchvm