Click here to Skip to main content
Click here to Skip to main content

Get or Set value to Controls inside iFrame from Parent

, 26 Sep 2013 CPOL
Rate this:
Please Sign up or sign in to vote.
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.

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.

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

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

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.

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

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

// 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)

Share

About the Author

Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ)
Software Developer Mindfire Solutions
India India
NOW I am a Conference Speaker. Please invite me to your College, Company, Event or Conference !!!
 
Proud Indian | Microsoft MVP | CodeProject MVP | Author | DZone Most Valuable Blogger | Community Expert | Moderator | jsfiddler | Cricketer | Cook | Dancer
 
Currently working @Mindfire Solutions.
Love to code and help guys to Trap the Bug.

My Tech Blog

taditdash.wordpress.com

Programming Community Profiles

jsfiddle | Stack Overflow

Other Blog Profiles

Mindfire CRM Team Blog | Mindfire Blog

Social Profiles

Facebook | Twitter | LinkedIn | Google+

Awards

  1. DZone Most Valuable Blogger
  2. Microsoft MVP 2014
  3. Code Project MVP 2014
  4. Star Achiever of the Month December 2013
  5. Mindfire Techno Idea Contest 2013 Winner
  6. Star of the Month July 2013
Follow on   Twitter   Google+   LinkedIn

Comments and Discussions

 
GeneralMy vote of 5 PinprofessionalSibeesh KV13-Nov-14 4:41 
GeneralRe: My vote of 5 PinprotectorTadit Dash (ତଡିତ୍ କୁମାର ଦାଶ)13-Nov-14 4:42 
GeneralRe: My vote of 5 PinprofessionalSibeesh KV13-Nov-14 4:45 
GeneralMy vote of 5 Pinmember_debasis26-Sep-13 20:30 
AnswerRe: My vote of 5 PinprofessionalTadit Dash26-Sep-13 20:36 
QuestionEssentially correct, but... PinmemberDewey25-Sep-13 16:28 
AnswerRe: Essentially correct, but... PinprofessionalTadit Dash25-Sep-13 18:51 
AnswerRe: Essentially correct, but... PinprofessionalTadit Dash26-Sep-13 1:38 
GeneralRe: Essentially correct, but... PinmemberDewey2-Oct-13 20:22 
QuestionGood job. PinprotectorPete O'Hanlon25-Sep-13 11:16 
AnswerRe: Good job. PinprofessionalTadit Dash25-Sep-13 11:22 

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

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

| Advertise | Privacy | Terms of Use | Mobile
Web01 | 2.8.141223.1 | Last Updated 26 Sep 2013
Article Copyright 2013 by Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ)
Everything else Copyright © CodeProject, 1999-2014
Layout: fixed | fluid