Click here to Skip to main content
12,500,884 members (49,252 online)
Click here to Skip to main content
Add your own
alternative version

Stats

26.1K views
8 bookmarked
Posted

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
Proud Indian | Microsoft MVP | CodeProject MVP | Speaker | 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, 2015, 2016
  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

You may also be interested in...

Comments and Discussions

 
Questionnice article but As per this solution not able to set in firefrox Pin
komalvagadia23-Jul-15 3:34
memberkomalvagadia23-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 
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
member_debasis26-Sep-13 19:30 
AnswerRe: My vote of 5 Pin
Tadit Dash26-Sep-13 19:36
professionalTadit Dash26-Sep-13 19:36 
QuestionEssentially correct, but... Pin
Dewey25-Sep-13 15:28
memberDewey25-Sep-13 15:28 
AnswerRe: Essentially correct, but... Pin
Tadit Dash25-Sep-13 17:51
professionalTadit Dash25-Sep-13 17:51 
AnswerRe: Essentially correct, but... Pin
Tadit Dash26-Sep-13 0:38
professionalTadit Dash26-Sep-13 0:38 
GeneralRe: Essentially correct, but... Pin
Dewey2-Oct-13 19:22
memberDewey2-Oct-13 19:22 
QuestionGood job. Pin
Pete O'Hanlon25-Sep-13 10:16
protectorPete O'Hanlon25-Sep-13 10:16 
AnswerRe: Good job. Pin
Tadit Dash25-Sep-13 10:22
professionalTadit Dash25-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.

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