Home arrow HTML arrow More Tricks with Web Page Dialog Boxes

More Tricks with Web Page Dialog Boxes

In this fourth part of a five-part series that details some of the things you can do with web page dialog boxes, you will learn how to change and add content to the immediate parent box, add a row to a parent dialog box, and much more.

Author Info:
By: Chrysanthus Forcha
Rating: 5 stars5 stars5 stars5 stars5 stars / 9
January 20, 2009
  1. · More Tricks with Web Page Dialog Boxes
  2. · Parent Table
  3. · Already Prepared Dialog Boxes
  4. · Executing a Function in Another Window
  5. · Accessing Value in an Ancestor Window

print this article

More Tricks with Web Page Dialog Boxes
(Page 1 of 5 )

Changing and Adding Content to the Immediate Parent Box

Recall that the object window in JavaScript represents the current window; that is the window that has the script. We saw that in order to open (create) a child window, we need it; we need to follow it with the dot and the “open()”method. This action returns a reference, which we have been calling “myWindow.” We have been using this reference to access the immediate child window.

We need a reference to refer to the immediate parent window. The DOM window object has a property called “opener.” This is used to return a reference to the immediate parent window. Consider the following statement.

var myParent = window.opener;

The phrase “window.opener” in the statement returns the reference to the immediate parent window. This reference is assigned to the variable “myParent.”

This is how we shall be accessing the parent window in this series.

Setting and Reading the Parent JavaScript Variable

Assume that in the Parent window you have the following JavaScript code:

<script type="text/javascript">

var lastName;

//the rest of the JavaScript code …


From the JavaScript of the child window, you can set this parent variable. giving the value “Smith” as follows:

myParent = window.opener;

myParent.lastName = "Smith";

So, in the JavaScript in the child, you use the reference of the parent window; this is followed by the dot and the variable in the parent window. The value (Smith) for the variable is assigned with the equal sign.

The following code in the JavaScript of the child window will read the value of the variable of the parent window and assign it to the variable, name, in the child.

myParent = window.opener;

var name = myParent.lastName;

Note that we have been starting with the first statement, which is “myParent = window.opener.” You write the first statement only once within a scope. You can then use the parent reference as many times as you want within the scope. Otherwise you would need to write the following each time you need the reference to the immediate parent:


With this, to obtain the above name, you would write:

var name = window.opener.lastName;

We shall not use this approach in this series. We shall be using the parent reference.

Setting and Reading Parent Element Values

In the JavaScript of the child window, the following statement would access the value of an element in the parent window:


Assume that you have the following element in the immediate parent window:

<input type=”text” id=”I1”>

The following statement in the child script (window) would set the value of the Input Text Control to “I love you.”

myParent.document.getElementById('I1').value = "I love you.”;

And the following code in the child script would read the value of the Input Text control from the parent window into the name variable in the child window:

var name = myParent.document.getElementById('I1').value;

blog comments powered by Disqus

- Does HTML5 Need a Main Element?
- Revisiting the HTML5 vs. Native Debate
- HTML5: Not for Phone Apps?
- HTML5 or Native?
- Job Hunting? Freelancer.com Lists This Quart...
- HTML5 in the News
- Report: HTML5 Mobile Performance Lags
- The Top HTML5 Audio Players
- Top HTML5 Video Tutorials
- HTML5: Reasons to Learn and Use It
- More of the Top Tutorials for HTML5 Forms
- MobileAppWizard Releases HTML5 App Builder
- HTML5 Boilerplate: Working with jQuery and M...
- HTML5 Boilerplate Introduction
- New API Platform for HTML5

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 

Developer Shed Affiliates


© 2003-2019 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials