使用 JavaScript 获取 IFrame innerHTML答案

【问题标题】：Get IFrame innerHTML using JavaScript使用 JavaScript 获取 IFrame innerHTML
【发布时间】：2011-09-15 11:15:17
【问题描述】：

我正在尝试使用以下代码获取 IFrame 内部 HTML。

 <iframe src="http://www.msn.com" 
         width="100%" height="100%" marginwidth="0"
         scrolling="no" frameborder="0" id="divInfo" 
         onreadystatechange="MyFunction(this);"></iframe>

JavaScript 代码是

  function MyFunction(frameObj)
    {
        if (frameObj.readyState == "complete")
        {
            alert(frameObj.document.body.innerHTML); 
        }
    }

但警报向我显示当前文档的 html。当 frmae 就绪状态完成时，如何获取 iframe 的内部 HTML。

如果我使用alert(frameObj.contentWindow.document.body.innerHTML);，它会给我访问被拒绝错误。

提前致谢。

【问题讨论】：

标签： javascript iframe innerhtml

【解决方案1】：

Access is denied 错误是由同源策略引起的。

由于您的页面托管在 http://www.example.com/（例如）上，如果您尝试访问 http://www.msn.com/ 上的详细信息，浏览器将不允许您访问，因为它们来自 2 个不同的域。

但是，如果您尝试从同一个域访问数据 - 托管页面：http://www.example.com/index.html，IFrame 的页面：http://www.example.com/iframe.html，那么您应该能够获取内容。

有关同源政策的更多信息，请点击以下链接：http://en.wikipedia.org/wiki/Same_origin_policy

顺便说一句，您可能想改用 frameObject.contentDocument

<script type="text/javascript">
function documentIsReady(frameObject) {
  alert(frameObject.contentDocument.body.innerHTML);
}
</script>

...你也可以使用onload代替onreadystatechange...

<iframe src="iframe.html" onload="documentIsReady(this);"></iframe>

【讨论】：

【解决方案2】：

如果<iframe> 的内容来自与父页面不同的域，您将无法读取该内容。

【讨论】：

感谢 @Pointy- 最终使用 .NET 的 HttpWebRequest/HttpWebResponse 对象，因为看起来没有其他方法可以使用 JavaScript。

【解决方案3】：

只有遵循same origin policy（意味着 iframe 与父文档位于同一服务器）时，您才能这样做。

无论如何，here 已回答：)

【讨论】：

【解决方案4】：

如前所述，如果<iframe> 的来源不是同一来源，则无法获取其内容。

这也适用于大多数其他获取外部内容的方式，例如使用 ajax 从另一个页面加载源代码。即：$('#div').load('http://www.google.com');

要加载外部内容，内容必须符合same origin policy.

这意味着内容必须使用相同的协议和主机。

上面链接的维基百科文章：

httpː//www.example.com/dir/page2.html --> 成功相同协议和主机

httpː//www.example.com/dir2/other.html --> 成功相同的协议和主机

httpː//username:password@www.example.com/dir2/other.html --> 成功相同的协议和主机

httpː//www.example.com:81/dir/other.html --> 失败协议和主机相同但端口不同

https://www.example.com/dir/other.html --> 不同协议失败

http://en.example.com/dir/other.html --> 不同主机失败

http://example.com/dir/other.html --> 失败的不同主机（需要精确匹配）

http://v2.www.example.com/dir/other.html --> 失败不同的主机（需要完全匹配）

简单地说，它必须在同一个网站上。所以虽然example.com/hello.html 可以从example.com/goodbye.html 加载内容，但它不能从google.com/content.html 加载内容

此外，它必须在同一个域中。子域被视为 VOID 相同的域策略，因此虽然 weebly.com/hello.html 可以从 weebly.com/goodbye.html 加载内容，但它无法从 user1.weebly.com/content.html 加载内容

当然有解决方法，像往常一样，~~但那是另一回事。~~实际上，这与问题非常相关。所以here is a wonderful questions 'thread' on all the ways to bypass it.

【讨论】：