More Tricks with Web Page Dialog Boxes
(Page 1 of 5 )
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.
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 …
</script>
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:
window.opener
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:
myParent.document.getElementById('I1').value
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;
Next: Parent Table >>
More HTML Articles
More By Chrysanthus Forcha
