How to Get the Body'S Content of an Iframe in JavaScript

Getting the contents of iframe

You don't need jQuery to do this necessarily.

var iFrame = document.getElementById('iFrameId').contentDocument;
var desiredElement = iFrame.getElementById('pageBreaker');

Using the document API we can easily get the iFrame element and pull the content document out of it. Then it is trivial locating an element via its ID.

Getting Contents of Iframe with Pure JavaScript

If it is on the same domain, try this. It won't let you access iframe contents if the iframe is of a different origin than the window that you are viewing.

var iframe = document.getElementById("awc_frame");
var iframe_contents = iframe.contentDocument.body.innerHTML;

Working example with jsfiddle iframe viewing a page on the same domain:

http://jsfiddle.net/tqAL3/1/

Can JavaScript read the contents of an iframe?

The short answer is, JavaScript can only look into an iframe from the same domain. So, no, you can't use an iframe get unrestricted cross domain access.

The longer answer is if you wanted to test this yourself, install a simple web server. It will take you < 2 mins. Here's a bunch

Edit your /etc/hosts file or C:\Windows\System32\Drivers\etc\hosts file and add

127.0.0.1  first.com
127.0.0.1  second.com

Make a folder with an index.html and an iframe.html. Put some JavaScript in index.html to try to look into iframe.html and also to include iframe.html as an iframe

<!-- index.html -->
<iframe src="http://second.com:8080/iframe.html></iframe>
<script>
   const iframe = document.querySelector('iframe');
   console.log(iframe.contentDocument.body.innerText);
</script>

<!-- iframe.html -->
<div>Hello world</div>

Run your server using that folder. In the browser go to
http://second.com/8080:index.html

Open the devtools (chrome, firefox), look at the console, you should see

Hello World

This worked because they are both on the same domain.

Now change the URL in your browser to http://first.com:8080/index.html

This time you'll see something like

VM41:66 Uncaught DOMException: Failed to read the 'contentDocument' 
 property from 'HTMLIFrameElement': Blocked a frame with origin 
"http://first.com:8080" from accessing a cross-origin frame.
at HTMLIFrameElement.contentDocumentDesc.get [as contentDocument] 

Note: depending on which server you use you'll need to change 8080 above to match the port your server uses.

How can I access the contents of an iframe with JavaScript/jQuery?

I think what you are doing is subject to the same origin policy. This should be the reason why you are getting permission denied type errors.

Get element from within an iFrame

var iframe = document.getElementById('iframeId');
var innerDoc = (iframe.contentDocument) ? iframe.contentDocument : iframe.contentWindow.document;

You could more simply write:

var iframe = document.getElementById('iframeId');
var innerDoc = iframe.contentDocument || iframe.contentWindow.document;

and the first valid inner doc will be returned.

Once you get the inner doc, you can just access its internals the same way as you would access any element on your current page. (innerDoc.getElementById...etc.)

IMPORTANT: Make sure that the iframe is on the same domain, otherwise you can't get access to its internals. That would be cross-site scripting.

---

Related Topics