Click here to Skip to main content
15,868,016 members
Articles / Web Development / HTML
Tip/Trick

Get or Set value to Controls inside iFrame from Parent

26 Sep 2013CPOL2 min read 63.2K   9   14
Have you ever tried to access the values of Child Page/iFrame inside the Parent Page? If not, try this tip.

Introduction

Sometimes, we need to achieve the following inside Parent Page.

  • Get the values of controls inside iFrame
  • Set value to Child controls inside iFrame

Background

This was a piece of research, which came up while I was writing the Blog Skype Status on CRM Form.
If possible, please go through the Blog.

What is the Concept?

Normally, we would do something like the following to get the Control inside the Document.

JavaScript
var yourChildiFrameControl = document.getElementById("childiFrameControlId"); 

But when we write this code inside Parent Page, Document will refer to the Parent Page and not the iFrame. This will give you undefined JavaScript error as the Control is not present inside Parent Document.
So, the aim is to find the Document Object of iFrame first and with the help of that object, find any Control inside it.

How To Do This?

Before getting the Document Object of iFrame, let's trap the iFrame first.

JavaScript
var childiFrame = document.getElementById("iFrameID"); 

Now, with the help of the trapped iFrame object (childiFrame), let's retrieve the iFrame Document.

JavaScript
var innerDoc = childiFrame.contentDocument  
		|| childiFrame.contentWindow.document; 

Note: Here the OR statement is used for the Cross Browser Support. As contentDocument does not work in IE, so contentWindow.document is used. To know more, refer to Frame/IFrame contentDocument Property.

So, we got the iFrame Document (innerDoc). Now it is just a matter of searching the Control by Id inside this Document.

JavaScript
// Get the Control inside iFrame Document.
var yourChildiFrameControl = innerDoc.getElementById("childiFrameControlId");

Thus, we can easily Get or Set value using the Control object (yourChildiFrameControl).

JavaScript
// Get value of Control
var value = yourChildiFrameControl.value;
 
// Set value to the Control 
yourChildiFrameControl.value = "Your value";

Note: As we obtained the Control object (yourChildiFrameControl) which is inside the iFrame, we can do all JavaScript DOM operations on that.

Important Note

This technique will work, if the Parent Page and iFrame both are in the Same Domain.
If any of them is in a Different Domain, then we have to follow Window Message Passing technique, which I have described in my tip - Communication with Cross Domain IFrame - A Cross Browser Solution.

Did You Like It?

If you find this tip helpful, then please vote it up, share and add some comments. It really means a lot. That will also help me to fine tune my technical skills. Thanks for reading. Hope you enjoyed the tip.

Points of Interest

The interesting part of the Tip/Trick is, we just found the Document of iFrame and that's it. Boom!!!

History

  • 25 September, 2013: Initial post
  • 26 September, 2013: Added "Important Note" Section

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


Proud Indian | Author | TEDx Speaker | Microsoft MVP | CodeProject MVP | Speaker | DZone Most Valuable Blogger| jsfiddler

My Website

taditdash.com

Programming Community Profiles

jsfiddle | Stack Overflow

Social Profiles

Facebook | Twitter | LinkedIn

Awards


  1. DZone Most Valuable Blogger
  2. Microsoft MVP 2014, 2015, 2016, 2017, 2018
  3. Code Project MVP 2014, 2015, 2016
  4. Star Achiever of the Month December 2013
  5. Mindfire Techno Idea Contest 2013 Winner
  6. Star of the Month July 2013

Comments and Discussions

 
GeneralMy vote of 5 Pin
Gaurav Sethi 202211-Oct-22 11:37
Gaurav Sethi 202211-Oct-22 11:37 
GeneralRe: My vote of 5 Pin
Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ)21-Oct-22 8:48
protectorTadit Dash (ତଡିତ୍ କୁମାର ଦାଶ)21-Oct-22 8:48 
Questionnice article but As per this solution not able to set in firefrox Pin
komalvagadia23-Jul-15 3:34
komalvagadia23-Jul-15 3:34 
GeneralMy vote of 5 Pin
Sibeesh KV13-Nov-14 3:41
professionalSibeesh KV13-Nov-14 3:41 
GeneralRe: My vote of 5 Pin
Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ)13-Nov-14 3:42
protectorTadit Dash (ତଡିତ୍ କୁମାର ଦାଶ)13-Nov-14 3:42 
Thanks again. Smile | :)

GeneralRe: My vote of 5 Pin
Sibeesh KV13-Nov-14 3:45
professionalSibeesh KV13-Nov-14 3:45 
GeneralMy vote of 5 Pin
_debasis26-Sep-13 19:30
professional_debasis26-Sep-13 19:30 
AnswerRe: My vote of 5 Pin
Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ)26-Sep-13 19:36
protectorTadit Dash (ତଡିତ୍ କୁମାର ଦାଶ)26-Sep-13 19:36 
QuestionEssentially correct, but... Pin
Dewey25-Sep-13 15:28
Dewey25-Sep-13 15:28 
AnswerRe: Essentially correct, but... Pin
Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ)25-Sep-13 17:51
protectorTadit Dash (ତଡିତ୍ କୁମାର ଦାଶ)25-Sep-13 17:51 
AnswerRe: Essentially correct, but... Pin
Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ)26-Sep-13 0:38
protectorTadit Dash (ତଡିତ୍ କୁମାର ଦାଶ)26-Sep-13 0:38 
GeneralRe: Essentially correct, but... Pin
Dewey2-Oct-13 19:22
Dewey2-Oct-13 19:22 
QuestionGood job. Pin
Pete O'Hanlon25-Sep-13 10:16
subeditorPete O'Hanlon25-Sep-13 10:16 
AnswerRe: Good job. Pin
Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ)25-Sep-13 10:22
protectorTadit Dash (ତଡିତ୍ କୁମାର ଦାଶ)25-Sep-13 10:22 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.