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?

possible duplicate of [How can I access iFrame elements with Javascript?](http://stackoverflow.com/questions/1452871/how-can-i-access-iframe-elements-with-javascript) — mmmmmm, Dec 16 '12 at 21:00
Use `window.frames['myIFrame'].contentDocument.getElementById('myIFrameElemId')` which works in modern browsers (e.g. Firefox 35) -- and pay attention to the same-origin policy — caw, Feb 18 '15 at 02:49
Consider to use cross-document messaging. https://stackoverflow.com/questions/9153445/how-to-communicate-between-iframe-and-the-parent-site — Michael Freidgeim, Jun 01 '22 at 20:35

score 66 · Accepted Answer · edited Apr 17 '21 at 07:40

66

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.

edited Apr 17 '21 at 07:40

greybeard

2,249
8
30
66

answered Sep 20 '09 at 17:00

RaYell

69,610
20
126
152

1

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 Sep 20 '09 at 17:06
1

Bith parent n child page are in same domain. – archana roy Sep 20 '09 at 17:07
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. – RaYell Sep 21 '09 at 06:35
14

`document.frames` no longer works. Use `window.frames` instead. – tylerl Jul 25 '12 at 15:58
To confirm what @tylerl said, I just checked in Firefox 25 and Chrome 31. In both cases `document.frames` was undefined, but `window.frames` worked perfectly – Ciaran Phillips Nov 20 '13 at 09:17
Wow, didn't realize I downvoted this instead of upvoting. And now it's too late to undo. Apologies! – Gaurav Feb 27 '15 at 21:27
4

`.contentDocument` rather than `document` works for me – svnm Oct 13 '15 at 04:28

score 17 · Answer 2 · answered Dec 23 '13 at 19:49

17

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.

answered Dec 23 '13 at 19:49

1

I keep hitting a security error even though the web pages are both offline. – TheBrenny Nov 19 '14 at 14:32
dont look anything else this is the actual answer, superb – BKM May 14 '20 at 12:16

score 15 · Answer 3 · edited Oct 19 '12 at 13:15

15

You should access frames from window and not document

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

edited Oct 19 '12 at 13:15

nhahtdh

55,989
15
126
162

answered Nov 01 '11 at 17:44

Mena Joseph

171
1
4

score 3 · Answer 4 · answered Mar 14 '17 at 09:45

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>

score 2 · Answer 5 · edited Jan 25 '17 at 00:18

2

this code worked for me:

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

edited Jan 25 '17 at 00:18

ReactiveRaven

7,203
2
29
38

answered Oct 28 '16 at 14:54

Abdelkreem Mostafa Saed

21
1

score 2 · Answer 6 · answered Apr 11 '18 at 09:39

2

Two ways

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

OR

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

answered Apr 11 '18 at 09:39

Vlad

7,997
3
56
43

Access iframe elements in JavaScript

6 Answers6

Linked

Related