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

Posted 2023-05-09

技术标签:

【中文标题】如何在 Javascript 中获取 iframe 的正文内容？【英文标题】：How to get the body's content of an iframe in Javascript? 【发布时间】：2017-05-22 04:09:45 【问题描述】：

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

我想得到的是：

test<br/>

【问题讨论】：

重要提示：如果 iFrame 是跨域的，则您无法访问它的内容。见Same-Origin policy。 【参考方案1】：

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

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

对我来说，这是获取 iframe 内容的最佳、易读甚至 afaik 最短的方法。

首先获取您的 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。

选择 iframe 中的元素

那么您通常可以使用getElementById() 甚至querySelectorAll() 从iframeDocument 中选择DOM-Element：

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


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

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

在 iframe 中调用函数

仅从iframe 中获取window 元素以调用一些全局函数、变量或整个库（例如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 /*, ... */);

注意

如果您观察same-origin policy，这一切皆有可能。

【讨论】：

iframe 在这里没有定义，要么你应该写完整的代码，要么不应该用它写 jQuery 请见谅，但这行代码是jquery代码的摘录，代码块是我自己的示例代码。其余的应该有人让自己出去。您唯一缺少的是变量 iframe。而且我不可能知道你的 iframe 在哪里或者它的 ID 是怎样的。您能否在答案顶部添加一条警告，如果 iframe 具有远程 src，这将不起作用？如果我错了，如果您能指出我如何在不发送另一个 HTTP 请求的情况下仍然可以获取 iframe 内容（不可能，因为我需要执行 javascript 来构造 iframe 内容并且不想部署第二个 JavaScript 环境（如果可以避免）。我有这样的警告。但在我的解释结束时。您必须遵守同源政策。就是这样。为了使上述工作正常进行，我必须将其附在document.querySelector('#id_description_iframe').onload = function() ... 中，希望对某人有所帮助。【参考方案2】：

使用 JQuery，试试这个：

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

【讨论】：

它不起作用，因为“域、协议和端口必须匹配。”：不安全的 JavaScript 尝试使用 URL 访问框架如前所述，如果域匹配，它将起作用。仅供参考，我刚刚发现 $("#id_description_iframe #id_of_iframe_body").html() 确实可以在 Chrome 中工作，但不适用于所有 firefox 版本，因此使用上述内容很好。 IE。 $("#id_description_iframe #id_of_iframe_body").contents().find("body").html() 在两者中都有效【参考方案3】：

它非常适合我：

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

【讨论】：

这很奇怪，但对我来说.body 不起作用。但是.getElementsByTagName('body')[0] 可以。它不是“.body”，只是“body”。删除点如果您使用香草 javascript，这应该是答案。【参考方案4】：

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（即分支）上运行存在跨域问题，阻止了来源为“someOther.com”的框架访问跨域框架。【参考方案5】：

在带有 JS 的 iframe 中使用 content：

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

【讨论】：

【参考方案6】：

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

<iframe src ="html_intro.asp"  >
  <p>Your browser does not support iframes.</p>
</iframe>

您使用 'src' 属性来设置 iframe html 的来源...

希望对您有所帮助:)

【讨论】：

【参考方案7】：

Chalkey 是正确的，你需要使用 src 属性来指定要包含在 iframe 中的页面。如果你这样做了，并且 iframe 中的文档与父文档在同一个域中，你可以使用这个：

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

显然，您可以对内容做一些有用的事情，而不仅仅是将它们放在警报中。

【讨论】：

【参考方案8】：

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

【讨论】：

下面的 html 在 Mac 上的 Chrome 7 中为我工作。我在 Windows 上的 Chrome 6 中测试了这篇原始帖子，效果很好。 window.frames.iframeId.document 对我来说是未定义的。（Ubuntu 13.04、Chrome）【参考方案9】：

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

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

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

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

【讨论】：

请始终将您的答案放在上下文中，而不仅仅是粘贴代码。有关详细信息，请参阅here。仅代码的答案被认为是低质量的：请务必说明您的代码的作用以及它如何解决问题。如果您可以在帖子中添加更多信息，它将帮助提问者和未来的读者。另请参阅解释完全基于代码的答案：meta.stackexchange.com/questions/114762/…【参考方案10】：

如果您不仅想选择 iframe 的正文，还想在其中插入一些内容，并且使用纯 JS、没有 JQuery 和没有 document.write()，我有一个解决方案，没有其他答案提供。

您可以使用以下步骤

1.选择您的 iframe：

var iframe = document.getElementById("adblock_iframe");

2.创建一个要插入框架的元素，比如一张图片：

var img = document.createElement('img');
img.src = "https://server-name.com/upload/adblock" + id + ".jpg";
img.style.paddingLeft = "450px";
//scale down the image is we have a high resolution screen on the client side
if (retina_test_media == true && high_res_test == true) 
    img.style.width = "200px";
    img.style.height = "50px";
 else 
    img.style.width = "400px";
    img.style.height = "100px";

img.id = "image";

3.将图片元素插入iframe：

iframe.contentWindow.document.body.appendChild(img);

【讨论】：

【参考方案11】：

一行代码即可获取iframe body的内容：

document.getElementsByTagName('iframe')[0].contentWindow.document.body.innerText;

【讨论】：

以上是关于如何在 Javascript 中获取 iframe 的正文内容？的主要内容，如果未能解决你的问题，请参考以下文章

javascript 如何获取iframe里面的内容？

如何使用 javascript 或 JQuery 从不可见的 iframe 中获取隐藏字段值

求助如何在javascript中通过iframe url定位iframe

javascript怎么操作iframe页面里面的dom元素？

如何用javascript 跨域获取iframe子页面的元素信息

如何使用 javascript 从 iframe 内部获取 iframe 的高度？具有多个 iframe 的页面呢？