使用 JavaScript 获取 IFrame innerHTML
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6357041/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Get IFrame innerHTML using JavaScript
提问by MUS
I'm trying to get an IFrame inner HTML using below code.
我正在尝试使用以下代码获取 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 code is
JavaScript 代码是
function MyFunction(frameObj)
{
if (frameObj.readyState == "complete")
{
alert(frameObj.document.body.innerHTML);
}
}
But the alert shows me the html of current document. How can i get the inner HTML of iframe when the frmae ready state is complete.
但是警报向我显示了当前文档的 html。当 frmae 就绪状态完成时，如何获取 iframe 的内部 HTML。
If i use alert(frameObj.contentWindow.document.body.innerHTML);it gives me Access is denied error.
如果我使用alert(frameObj.contentWindow.document.body.innerHTML);它会给我访问被拒绝错误。
Thanks in advance.
提前致谢。
采纳答案by Pointy
You can't read the contents of an <iframe>that has content from a different domain than that of the parent page.
您无法读取<iframe>包含来自与父页面不同域的内容的内容。
回答by DashK
Access is denied error is caused by the same origin policy.
访问被拒绝错误是由同源策略引起的。
Since your page is hosted on http://www.example.com/(For example), if you try to access details on http://www.msn.com/, the browser won't let you since they are from 2 different domains.
由于您的页面托管在http://www.example.com/ 上（例如），如果您尝试访问http://www.msn.com/ 上的详细信息，浏览器将不会让您，因为它们来自2个不同的域。
However, if you are trying to access data from the same domain - Hosting page: http://www.example.com/index.html, IFrame's page: http://www.example.com/iframe.html, then you should be able to get the content.
但是，如果您尝试访问来自同一域的数据 - 托管页面：http: //www.example.com/index.html，IFrame的页面：http: //www.example.com/iframe.html，那么您应该可以获取内容。
For more information on the Same Origin Policy, here's a link: http://en.wikipedia.org/wiki/Same_origin_policy
有关同源政策的更多信息，请访问以下链接：http: //en.wikipedia.org/wiki/Same_origin_policy
BTW, you may want to use frameObject.contentDocument instead
顺便说一句，您可能想改用 frameObject.contentDocument
<script type="text/javascript">
function documentIsReady(frameObject) {
alert(frameObject.contentDocument.body.innerHTML);
}
</script>
... and you can also use the onload instead of onreadystatechange...
...你也可以使用 onload 而不是 onreadystatechange ...
<iframe src="iframe.html" onload="documentIsReady(this);"></iframe>
回答by Jonas G. Drange
You can only do that if it adheres to the same origin policy(meaning the iframe is at the same server as the parent document).
只有在它遵循相同的源策略（意味着 iframe 与父文档位于同一服务器上）时，您才能这样做。
Anyway, this was answered here:)
无论如何，这是在这里回答:)
回答by william44isme
As has been said previously, you cannot get the contents of an <iframe>if its source is not from the same origin.
如前所述，<iframe>如果来源不是同一来源，则您无法获取其内容。
This also applies to most other ways of getting external content, such as using ajax to load source code from another page. ie: $('#div').load('http://www.google.com');
这也适用于大多数其他获取外部内容的方式，例如使用 ajax 从另一个页面加载源代码。IE：$('#div').load('http://www.google.com');
To load external content, the content must comply with the same origin policy.
要加载外部内容，内容必须符合同源策略。
This means that the content must be on the same protocol and host.
这意味着内容必须在相同的协议和主机上。
Wikipedia Article Linked Above:
http?//www.example.com/dir/page2.html --> Success Same protocol and host
http?//www.example.com/dir2/other.html --> Success Same protocol and host
http?//username:[email protected]/dir2/other.html --> Success Same protocol and host
http?//www.example.com:81/dir/other.html --> Failure Same protocol and host but differentport
https://www.example.com/dir/other.html--> Failure Different protocol
http://en.example.com/dir/other.html--> Failure Different host
http://example.com/dir/other.html--> Failure Different host (exact match required)
http://v2.www.example.com/dir/other.html--> Failure Different host (exact match required)
上面链接的维基百科文章：
http?//www.example.com/dir/page2.html -->成功 相同的协议和主机
http?//www.example.com/dir2/other.html --> 成功 协议和主机相同
http?//username:[email protected]/dir2/other.html --> Success 相同的协议和主机
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--> 失败 主机不同（需要完全匹配）
Simply put, it must be on the same website. So while example.com/hello.htmlcan load content from example.com/goodbye.html, it could not load content from google.com/content.html
简单地说，它必须在同一个网站上。因此，虽然example.com/hello.html可以从 加载内容example.com/goodbye.html，但无法从google.com/content.html
Also, it must be on the same domain. Sub domains are considered to VOID the same domain policy so while weebly.com/hello.htmlcan load content from weebly.com/goodbye.html, it could not load content from user1.weebly.com/content.html
此外，它必须在同一个域中。子域被认为使相同的域策略无效，因此虽然weebly.com/hello.html可以从 加载内容weebly.com/goodbye.html，但不能从user1.weebly.com/content.html
There are of course workarounds, as usual, but that's another story all together.Actually, this is quite relevant to the question. So here is a wonderful questions 'thread' on all the ways to bypass it.
像往常一样，当然有解决方法， 但这是另一个故事。实际上，这与问题非常相关。所以这里有一个关于绕过它的所有方法的精彩问题“线程”。
