How can I access iframe elements with Javascript?

JavascriptDomIframe

Javascript Problem Overview


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.

Javascript Solutions


Solution 1 - Javascript

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.

Solution 2 - Javascript

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

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

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
Questionarchana royView Question on Stackoverflow
Solution 1 - Javascriptmeder omuralievView Answer on Stackoverflow
Solution 2 - JavascriptDoug AmosView Answer on Stackoverflow