Controlling Browser Properties with JavaScript - Navigating the Family Tree (Page 5 of 8 )
It's interesting to note, also, that the manner in which you refer to windows changes depending on where you are when you do the referring. In order to close the current window, for example, you can always use the following:
<script language="JavaScript">
// close this window
window.close();
</script>
However, you can also affect other windows, simply by replacing the generic name "window" with the actual name of the window. For example, let's suppose you want to close a child window (previously assigned the name "baby") from a parent window.
<script language="JavaScript">
// close the child window named 'baby'
baby.close();
</script>
Thus, JavaScript always understands the generic object name "window" to refer to the current window. To refer to any other window, you should use the corresponding window name.
Let's look at a simple example to see how this works. Here, the primary window consists of a menu containing links, each of which open up in a child window named "display". The child window can be closed either from the parent window, by clicking on the "Close Display Window" link, or from the child window itself, by clicking the "Close Me" link. Here's the code for the menu:
<html>
<head>
</head>
<body>
<ul>
<li><a href="javascript:var display=window.open
('http://www.melonfire.com/community/columns/trog/',
'display');">Melonfire</a>
<li><a href="javascript:var display
= window.open
('http://www.xmlphp.com/', 'display');">
XML and PHP</a>
<li><a href="javascript:var display
= window.open
('http://www.mysql-tcr.com/', 'display');">
MySQL: The Complete Reference</a>
</ul>
<a href="javascript:display.close();"><b>Close Display Window</b></a>
</body>
</html>
Notice that I have prefixed the call to close() with the child window name.
Within the pages loaded, there exists a "Close Me" link as well, which can be used to close the child window directly. Here's what one of the pages loaded into the child window might look like:
<html>
<head>
</head>
<body>
<!-- page content for link here -->
<!-- close window link -->
<a href="javascript:window.close();">Close Me!</a>
</body>
</html>
In this case, since I'm closing the current window, I can use window.close() directly without worrying about the window name.
Thus far, I've shown you how to control the child window from the parent. It's also possible to work the other way around, controlling the parent window from the child. Every Window object exposes an "opener" property, which contains a reference to the window that created it. Therefore, even if you don't know the name of the parent window, it's still possible to access and manipulate it via this "opener" property.
Let's take a look at a simple example, resizing the parent window from the child:
<html>
<head>
</head>
<body>
<!-- page content for link here -->
<!-- resize parent window -->
<a href="javascript:opener.resizeTo(400,400);">Resize My Parent</a>
</body>
</html>
Next: Location is Everything >>
More JavaScript Articles
More By Nariman K, (c) Melonfire
/ 103 
