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.
More Tricks with Web Page Dialog Boxes - Accessing Value in an Ancestor Window (Page 5 of 5 )
The DOM does not give us a direct way to access an ancestor window. It gives us a direct way to access the immediate parent and the immediate child. My way of accessing an ancestor is to write a particular code in the main window and in all the dialog boxes. Code like this will do:
function precedeOrReturn(name)
{
if (window.name == name)
{
return window.self;
}
else
{
parentWin = window.opener;
return parentWin.precedeOrReturn();
}
}
This precedeOrReturn(name) function is in the JavaScript of every window (box). Each window can call the function that is in its JavaScript. When you call the function, you send the name of the ancestor window in which you are interested, as an argument. The function first checks to see if the name sent is the name of its window (where the function resides). If that is the case, it develops a reference to its window and returns it to the calling function with the following statement:
return window.self;
If the name is not the name of its window, then it calls the same function in the immediate parent with the following statement:
parentWin = window.opener;
return parentWin.precedeOrReturn();
The following statement will call the precedeOrReturn(name) function in its window:
theRef = precedeOrReturn('ancestorName')
The reference returned is assigned to theRef. The call will be sent from window to window until the window with the ancestor name is reached. Then the reference is returned; it moves in the reverse direction, from window to window, until the theRef variable gets it.
You can now use this reference to access values and JavaScript functions in the ancestor window. Imagine that you have a text input control with the ID “DI0” in the ancestor window. You can set its value at the calling window as follows:
As you can see, the precedeOrReturn(name) function needs a name argument. This means that each window should have its name declared before you can use the function. When you open a window with the open() method, you can give the new window its name; that is fine. The problem now is, how do you give the name of the main window, since it is the window that is first opened? Well, the following JavaScript in the BODY element of the main window will solve the problem:
<html>
<body>
<script type="text/javascript">
window.name= "windowName";
</script>
</body>
</html>
The line,
window.name= "windowName";
gives the name.
The word windowName should be the name you give to the window. HTML elements have IDs. Windows, seen the way I have presented them in this series, do not have IDs. The name for the window serves as its ID.
We have come to the end of this part. This is a good place to take a break. We continue in the next part.
DISCLAIMER: The content provided in this article is not warranted or guaranteed by Developer Shed, Inc. The content provided is intended for entertainment and/or educational purposes in order to introduce to the reader key ideas, concepts, and/or product reviews. As such it is incumbent upon the reader to employ real-world tactics for security and implementation of best practices. We are not liable for any negative consequences that may result from implementing any information covered in our articles or tutorials. If this is a hardware review, it is not recommended to open and/or modify your hardware.
HTML 
Questions and Answers on Chrys`s Approach to Active Client Pages
