Get IFrame innerHTML using JavaScript

Question

I'm trying to get an IFrame inner HTML using below code.

 <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

  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.

If i use alert(frameObj.contentWindow.document.body.innerHTML); it gives me Access is denied error.

Thanks in advance.

Answer 1

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.

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.

For more information on the Same Origin Policy, here's a link: http://en.wikipedia.org/wiki/Same_origin_policy

BTW, you may want to use frameObject.contentDocument instead

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

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

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

Answer 2

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

Answer 3

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).

Anyway, this was answered here :)

Answer 4

As has been said previously, you cannot get the contents of an <iframe> if its source is not from the same origin.

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');

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:[e-mail]/dir2/other.html --> Success Same protocol and host

httpː//www.example.com:81/dir/other.html --> Failure Same protocol and host but different port

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)

Simply put, it must be on the same website. So while example.com/hello.html can load content from example.com/goodbye.html, it could not load content from 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.html can load content from weebly.com/goodbye.html, it could not load content from 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.