Javascript Iframe 内部HTML答案

【问题标题】：Javascript Iframe innerHTMLJavascript Iframe 内部HTML
【发布时间】：2010-09-13 10:31:50
【问题描述】：

有谁知道如何从 IFRAME 中获取 HTML 我尝试了几种不同的方法：

document.getElementById('iframe01').contentDocument.body.innerHTML
document.frames['iframe01'].document.body.innerHTML
document.getElementById('iframe01').contentWindow.document.body.innerHTML

等

【问题讨论】：

对于从谷歌搜索到这里的任何其他人，至少在 Firefox 中也可以尝试theiFrameObject.contentDocument.body.innerHTML。
@MattBlaine 的解决方案有效，但 iframe src 需要与主窗口位于同一域中。否则，iframe 必须在加载时将其窗口传递给父级parent.ifw = window，然后父级可以使用window.ifw.document

标签： javascript iframe innerhtml

【解决方案1】：

我想这就是你想要的：

window.frames['iframe01'].document.body.innerHTML

编辑：

我有充分的权威表明这在 Chrome 和 Firefox 中不起作用，尽管它在 IE 中完美运行，这是我测试它的地方。回想起来，这是一个很大的错误

这将起作用：

window.frames[0].document.body.innerHTML

我知道这不是所要求的，但我不想删除答案，因为我认为它有一个位置。

我喜欢下面@ravz 的 jquery 答案。

【讨论】：

如果你想更加明确，你可以说：window.frames['iframe01'].document.body.innerHTML
这种方式在 Firefox 中不会也不会起作用，因为 firefox 不支持 window.frames['frameId'] only window.frames[0] window.frames[1] 等

【解决方案2】：

有类似下面的东西会起作用。

<iframe id = "testframe" onload = populateIframe(this.id);></iframe>

// The following function should be inside a script tag

function populateIframe(id) { 

    var text = "This is a Test"
var iframe = document.getElementById(id); 

var doc; 

if(iframe.contentDocument) { 
    doc = iframe.contentDocument; 
} else {
    doc = iframe.contentWindow.document; 
}

doc.body.innerHTML = text; 

  }

【讨论】：

【解决方案3】：

如果您查看JQuery，您可以执行以下操作：

<iframe id="my_iframe" ...></iframe>

$('#my_iframe').contents().find('html').html();

这是假设您的 iframe 父级和子级驻留在同一台服务器上，因为 Javascript 中的 Same Origin Policy。

【讨论】：

您正在抓取 html 元素的 innerHTML 而不是正文，这是一种非常倒退的方法。当有用于检索您想要的内容的本机 DOM 属性（例如 .body）时，您应该避免 find 调用的开销。
请停止使用 jQuery 作为答案！
同意使用JQuery作为答案真的很烦人！请求 JQuery 请求的人有吗？
@Prestaul 有些人试图从性能方面、挑战方面、程序方面进行思考。其他人认为 jQuery 是所有问题的解决方案...

【解决方案4】：

康罗伊的回答是对的。如果您只需要 body 标签中的内容，只需使用：

$('#my_iframe').contents().find('body').html();

【讨论】：

最佳答案！谢谢！别忘了：

【解决方案5】：

不要忘记，出于安全考虑，您不能跨域。

所以如果是这种情况，你应该使用JSON。

【讨论】：

【解决方案6】：

您可以为此目的使用 contentDocument 或 contentWindow 属性。这是示例代码。

function gethtml() {
  const x = document.getElementById("myframe")
  const y = x.contentWindow || x.contentDocument
  const z = y.document ? y.document : y
  alert(z.body.innerHTML)
}

这里，myframe 是您的 iframe 的 ID。注意：您不能从域外的 src 中提取 iframe 中的内容。

【讨论】：

【解决方案7】：

document.getElementById('iframe01').outerHTML

【讨论】：

【解决方案8】：

如果您在 Firefox 上安装 ForceCORS 过滤器，您可以从其他域获取源代码。当您打开此过滤器时，它将绕过浏览器中的安全功能，即使您尝试阅读另一个网页，您的脚本也将正常工作。例如，您可以在 iframe 中打开 FoxNews.com，然后阅读其源代码。现代网络浏览器默认拒绝此功能的原因是，如果其他域包含一段 JavaScript，而您正在阅读它并将其显示在您的页面上，则它可能包含恶意代码并构成安全威胁。因此，每当您在页面上显示来自另一个域的数据时，您必须提防这种真正的威胁，并实施一种方法来过滤掉您的文本中的所有 JavaScript 代码，然后再显示它。请记住，当一段假定的原始文本包含一些包含在脚本标签中的代码时，当您将其显示在页面上时它们不会显示出来，但它们会运行！所以，意识到这是一种威胁。

http://www-jo.se/f.pfleger/forcecors

【讨论】：

【解决方案9】：

此解决方案的工作原理与 iFrame 相同。我创建了一个 PHP 脚本，可以从其他网站获取所有内容，最重要的是您可以轻松地将自定义 jQuery 应用于该外部内容。请参考以下脚本，该脚本可以从其他网站获取所有内容，然后您也可以应用您的自定义 jQuery/JS。此内容可以在任何地方、任何元素或任何页面内使用。

<div id='myframe'>

  <?php 
   /* 
    Use below function to display final HTML inside this div
   */

   //Display Frame
   echo displayFrame(); 
  ?>

</div>

<?php

/* 
  Function to display frame from another domain 
*/

function displayFrame()
{
  $webUrl = 'http://[external-web-domain.com]/';

  //Get HTML from the URL
  $content = file_get_contents($webUrl);

  //Add custom JS to returned HTML content
  $customJS = "
  <script>

      /* Here I am writing a sample jQuery to hide the navigation menu
         You can write your own jQuery for this content
      */
    //Hide Navigation bar
    jQuery(\".navbar\").hide();

  </script>";

  //Append Custom JS with HTML
  $html = $content . $customJS;

  //Return customized HTML
  return $html;
}

【讨论】：

【解决方案10】：

您可以使用此代码从 iframe 中获取 html iframe = document.getElementById('frame'); innerHtml = iframe.contentDocument.documentElement.innerHTML

【讨论】：