Access iframe elements in JavaScript

Question

I have a webpage where there is a textarea within an iframe. I need to read the value of this textarea from its child page using JavaScript.

Presently by using window.parent.getelementbyID().value in the JavaScript, I am able to fetch values of all controls in the parent page except the textarea within the iframe.

Can anyone please give me any pointers to resolve this issue?

• archana roy: Can anyone help me please with the logic?
• mmmmmm: possible duplicate of How can I access iFrame elements with Javascript?
• caw: Use window.frames['myIFrame'].contentDocument.getElementById('myIFrameElemId') which works in modern browsers (e.g. Firefox 35) -- and pay attention to the same-origin policy
• BKM: @CAW is absolutely right its working now
• Michael Freidgeim: Consider to use cross-document messaging. stackoverflow.com/questions/9153445/…

Answer 1

If your iframe is in the same domain as your parent page you can access the elements using window.frames collection.

// replace myIFrame with your iFrame id
// replace myIFrameElemId with your iFrame's element id
// you can work on window.frames['myIFrame'].document like you are working on
// normal document object in JS
window.frames['myIFrame'].document.getElementById('myIFrameElemId')

If your iframe is not in the same domain the browser should prevent such access for security reasons.

• archana roy: Thanks a lot for your suggestions. But the problem is that the frame id n frame name in my parent page changes in runtime, hence we cannot use the frame id/frame name for reference. Is there any other way Ra Yell?..
• archana roy: Bith parent n child page are in same domain.
• RaYell: If there is ony one iframe on your site you could try using document,frames[0].document. If there are more you need to change the index to some other value.
• tylerl: document.frames no longer works. Use window.frames instead.
• svnm: .contentDocument rather than document works for me

Answer 2

window.frames['myIFrame'].document.getElementById('myIFrameElemId')

not working for me but I found another solution. Use:

window.frames['myIFrame'].contentDocument.getElementById('myIFrameElemId')

I checked it on Firefox and Chrome.

• TheBrenny: I keep hitting a security error even though the web pages are both offline.
• BKM: dont look anything else this is the actual answer, superb

Answer 3

You should access frames from window and not document

window.frames['myIFrame'].document.getElementById('myIFrameElemId')

Answer 4

Make sure your iframe is already loaded. Old but reliable way without jQuery:

<iframe src="samedomain.com/page.htm" id="iframe" onload="access()"></iframe>
<script>
function access() {
 var iframe = document.getElementById("iframe");
 var innerDoc = iframe.contentDocument || iframe.contentWindow.document;
 console.log(innerDoc.body);
}
</script>

Answer 5

Two ways

window.frames['myIFrame'].contentDocument.getElementById('myIFrameElemId')

OR

window.frames['myIFrame'].contentWindow.document.getElementById('myIFrameElemId')

Answer 6

this code worked for me:

window.frames['myIFrame'].contentDocument.getElementById('myIFrameElemId');