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

javascript html iframe

2022-08-30 01:53:46

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

答案 1

确切的问题是如何用纯JavaScript而不是jQuery来做到这一点。

但是我总是使用可以在jQuery的源代码中找到的解决方案。它只是原生JavaScript的一行。

对我来说，这是最好的，易于阅读的，甚至是获取iframes内容的最短方法。

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

在 iframe 中选择元素

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

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

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

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

在 iframe 中调用函数

从中获取元素以调用一些全局函数，变量或整个库（例如）：windowiframejQuery

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 /*, ... */);

注意

如果您遵守同源策略，所有这些都是可能的。

答案 2

使用JQuery，试试这个：

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