使用 JavaScript 获取 IFrame innerHTML

Posted 2023-05-07

【中文标题】使用 JavaScript 获取 IFrame innerHTML

【英文标题】：Get IFrame innerHTML using JavaScript

【发布时间】：2011-09-15 11:15:17

【问题描述】：

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

 <iframe src="http://www.msn.com" 
           margin
         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);，它会给我访问被拒绝错误。

提前致谢。

【参考方案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:[e-mail]/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.