使用JavaScript获取IFrame innerHTML

Question

我正试图使用以下代码获得一个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);，则会出现拒绝访问错误。

提前谢谢。

Answer 1

拒绝访问错误是由同源策略引起的。

由于您的页面托管在http://www.example.com/（例如），如果您尝试访问http://www.msn.com/，浏览器不会让你，因为他们来自两个不同的域。

但是，如果您试图访问来自同一域的数据-主机页面：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>

Answer 2

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

Answer 3

只有当它遵守同源策略（意味着iframe与父文档位于同一服务器上）时，才能执行此操作。

不管怎样，这个问题在这里得到了回答：）

Answer 4

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

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

若要加载外部内容，内容必须符合同源策略。

这意味着内容必须位于同一协议和主机上。

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

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

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

用户名：[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 加载内容

和往常一样，当然也有变通办法，但这完全是另一回事