How can I access iframe elements with Javascript?

Question

I have a webpage where there is a textarea within a iframe. I need to read the value of this textarea from its child page 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.

The frame id and frame name in my parent page changes in runtime, hence we cannot use the frame id/frame name for reference.

@archana: RaYell's answer stackoverflow.com/questions/1451208/1451455#1451455 includes a comment from the first time you asked this question. If you do not know the frame id or name, you can use document.frames[0].document.getElementById() (or some other index if it is not the first <iframe> on the page. — Grant Wagner
– Grant Wagner, Commented Sep 21, 2009 at 17:13

Owen Blacker · Accepted Answer · 2015-06-05 15:58:10Z

90

If you have the HTML

<form name="formname" .... id="form-first">
    <iframe id="one" src="iframe2.html">
    </iframe>
</form>

and JavaScript

function iframeRef( frameRef ) {
    return frameRef.contentWindow
        ? frameRef.contentWindow.document
        : frameRef.contentDocument
}

var inside = iframeRef( document.getElementById('one') )

inside is now a reference to the document, so you can do getElementsByTagName('textarea') and whatever you like, depending on what's inside the iframe src.

edited Jun 5, 2015 at 15:58

Owen Blacker

4,1733 gold badges36 silver badges72 bronze badges

answered Sep 21, 2009 at 4:20

meder omuraliev

187k76 gold badges401 silver badges443 bronze badges

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

5 Comments

archana roy Over a year ago

Just 1 concern Meder-- var inside = iframeRef( document.getElementById('one') ) The frameid n framename in my page changes in runtime, so it wont be possible to pass the frameid(as done by you). Is there any other alternative?

meder omuraliev Over a year ago

yes. getElementsByTagName('iframe') to refer to a nodeList and access elements inside with [0], assuming you're dealing with one. or you can do a loop.

archana roy Over a year ago

Thanks Meder. Just 1 more query-- Whats the difference between-- 'frameRef.contentWindow.document' and 'frameRef.contentDocument' I want to understand the concept behind this. It would be really good of you,if you explain it a bit. Thanks a lot for your help.

meder omuraliev Over a year ago

An explanation can be found @ xkr.us/articles/dom/iframe-document Some browsers support one of those dom properties, and I just check for either.

archana roy Over a year ago

You r a genius Meder. Thanks a ton for your instant help.

Doug Amos · Accepted Answer · 2013-07-03 10:37:36Z

19

Using jQuery you can use contents(). For example:

var inside = $('#one').contents();

answered Jul 3, 2013 at 10:37

Doug Amos

4,3831 gold badge24 silver badges24 bronze badges

1 Comment

codeymcgoo Over a year ago

An important consideration here is that the contents method can "get the content document of an iframe, if the iframe is on the same domain as the main page."

Collectives™ on Stack Overflow

How can I access iframe elements with Javascript?

2 Answers 2

5 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related