如何在 Javascript 中获取 iframe 的正文内容?

IT技术 javascript html iframe
2021-01-27 13:38:39
<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/>
6个回答

确切的问题是如何使用纯 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 中工作,它contentWindowiframe对象属性期间执行此技巧大多数其他浏览器使用该contentDocument属性,这就是我们在此 OR 条件中首先证明该属性的原因。如果未设置,请尝试contentWindow.document

选择 iframe 中的元素

然后你通常可以使用getElementById()甚至querySelectorAll()从 中选择 DOM-Element 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 /*, ... */);

笔记

如果您遵守同源策略,这一切都是可能的

我有这样的警告。但在我的解释结束时。您必须遵守同源策略。就这样。
2021-03-15 13:38:39
为了使上述工作正常进行,我不得不将其document.querySelector('#id_description_iframe').onload = function() {... 附在希望它对某人有所 帮助中。
2021-03-21 13:38:39
如果 iframe 有远程 src,您能否在答案的顶部添加一个警告,说明这不起作用?如果我错了,如果您能指出我如何在不发送另一个 HTTP 请求的情况下仍然可以获得 iframe 内容,我将不胜感激(不可能,因为我需要执行 javascript 来构建 iframe 内容并且不想部署如果可以避免,则使用第二个 javascript 环境)。
2021-03-22 13:38:39
请原谅我,这行代码摘自 jquery 代码,代码块是我自己的示例代码。剩下的应该有人出去。您唯一缺少的是变量 iframe。我不可能知道你的 iframe 在哪里或者它的 ID 是什么。
2021-03-24 13:38:39
iframe 在这里未定义,要么你应该写完整的代码,要么不应该用它写 jQuery
2021-04-04 13:38:39

使用 JQuery,试试这个:

$("#id_description_iframe").contents().find("body").html()
如前所述,如果域匹配,它将起作用。仅供参考,我刚刚发现 $("#id_description_iframe #id_of_iframe_body").html() 确实在 Chrome 中工作,但在所有 firefox 版本中都没有,因此使用上述内容很好。即 $("#id_description_iframe #id_of_iframe_body").contents().find("body").html() 在两者中都有效
2021-03-15 13:38:39
它不起作用,因为“域、协议和端口必须匹配”。: 不安全的 JavaScript 尝试使用 URL 访问框架
2021-03-24 13:38:39

它非常适合我:

document.getElementById('iframe_id').contentWindow.document.body.innerHTML;
如果您使用 vanilla javascript,这应该是答案。
2021-03-13 13:38:39
这很奇怪,但对我来说.body不起作用。然而.getElementsByTagName('body')[0]确实如此。
2021-03-24 13:38:39
它不是“.body”,只是“body”。删除点
2021-03-29 13:38:39

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);
 }
它在 safari(即分支)上运行
2021-03-11 13:38:39
有跨域问题,阻止了一个来自someOther.com的框架访问跨域框架。
2021-03-14 13:38:39

使用contentiframe中与JS:

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