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? — mmmmmm
– mmmmmm, Commented Dec 16, 2012 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
– caw, Commented Feb 18, 2015 at 2:49
Consider to use cross-document messaging. stackoverflow.com/questions/9153445/… — Michael Freidgeim
– Michael Freidgeim, Commented Jun 1, 2022 at 20:35

greybeard · Accepted Answer · 2021-04-17 07:40:17Z

69

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, 2021 at 7:40

greybeard

2,6779 gold badges40 silver badges71 bronze badges

answered Sep 20, 2009 at 17:00

RaYell

70.6k20 gold badges127 silver badges154 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

archana roy Over a year ago

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 Over a year ago

Bith parent n child page are in same domain.

RaYell Over a year ago

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 Over a year ago

document.frames no longer works. Use window.frames instead.

svnm Over a year ago

.contentDocument rather than document works for me

|

user964357 · Accepted Answer · 2013-12-23 19:49:20Z

18

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, 2013 at 19:49

user964357

2 Comments

TheBrenny Over a year ago

I keep hitting a security error even though the web pages are both offline.

BKM Over a year ago

dont look anything else this is the actual answer, superb

nhahtdh · Accepted Answer · 2012-10-19 13:15:56Z

15

You should access frames from window and not document

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

edited Oct 19, 2012 at 13:15

nhahtdh

56.9k15 gold badges131 silver badges164 bronze badges

answered Nov 1, 2011 at 17:44

Mena Joseph

1711 silver badge4 bronze badges

Comments

lukyer · Accepted Answer · 2017-03-14 09:45:56Z

3

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>

answered Mar 14, 2017 at 9:45

lukyer

8,0833 gold badges40 silver badges31 bronze badges

Comments

Vlad · Accepted Answer · 2018-04-11 09:39:59Z

3

Two ways

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

OR

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

answered Apr 11, 2018 at 9:39

Vlad

8,6223 gold badges63 silver badges44 bronze badges

Comments

ReactiveRaven · Accepted Answer · 2017-01-25 00:18:51Z

2

this code worked for me:

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

edited Jan 25, 2017 at 0:18

ReactiveRaven

7,6492 gold badges31 silver badges39 bronze badges

answered Oct 28, 2016 at 14:54

Abdelkreem Mostafa Saed

211 bronze badge

Collectives™ on Stack Overflow

Access iframe elements in JavaScript

6 Answers 6

7 Comments

2 Comments

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

7 Comments

2 Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related