Get IFrame innerHTML using JavaScript

Question

I am trying to get the internal HTML IFrame using the code below.

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

JavaScript code

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

But the warning shows me the html of the current document. How can I get the internal HTML iframe when the frmae ready state is complete.

If I use alert(frameObj.contentWindow.document.body.innerHTML); It gives me access to the failure error.

Thanks in advance.

Answer 1

You cannot read the contents of an <iframe> that has content from a different domain than the parent page.

Answer 2

Access denied, error caused by the same origin policy.

Since your page is hosted at http://www.example.com/ (for example), if you are trying to access data at http://www.msn.com/ , the browser will not allow you because they are from two different domains.

However, if you are trying to access data from the same domain - Hosting page: http://www.example.com/index.html , IFrame page: http://www.example.com/iframe.html , you can get content.

For more information about the “Same Exodus” policy, here is the link: http://en.wikipedia.org/wiki/Same_origin_policy

By the way, you can use frameObject.contentDocument instead

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

... and you can also use onload instead of onreadystatechange ...

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

Answer 3

This can only be done if it adheres to the same origin policy (this means that the iframe is on the same server as the parent document).

In any case, this was answered here :)

Answer 4

As mentioned earlier, you cannot get the contents of an <iframe> if its source is not from a single source.

This also applies to most other methods of obtaining external content, for example, using ajax to download source code from another page. i.e.: $('#div').load('http://www.google.com');

To download 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 related above:

httpː // www.example.com / dir / page2.html → Success The same protocol and host

httpː // www.example.com / dir2 / other.html → Success The same protocol and host

httpː // username: [e-mail]/dir2/other.html → Success The same protocol and host

httpː // www.example.com: 81 / dir / other.html → Failed. The same protocol and host, but a different port

https://www.example.com/dir/other.html -> Failure Various Protocols

http://en.example.com/dir/other.html → Miscellaneous Host Failure

http://example.com/dir/other.html -> Failure Various hosts (exact match required)

http://v2.www.example.com/dir/other.html → Failure Various hosts (exact match required)

Simply put, it should be on the same site. Therefore, while example.com/hello.html can download content from example.com/goodbye.html , it cannot download content from google.com/content.html

In addition, it must be in the same domain. Subdomains are considered VOIDs by the same domain policy, so while weebly.com/hello.html can download content from weebly.com/goodbye.html , it cannot download content from user1.weebly.com/content.html

There are, of course, workarounds, as usual, but this other story is all together. Actually, this is very relevant for the issue. So, here is a wonderful thread topic on all its routes.