HomeJavaScript Page 5 - Controlling Browser Properties with JavaScript
Navigating the Family Tree - JavaScript
Maybe you know how to make Web pages dance to your tune with JavaScript - but how about making the browser do the same? This tutorial focuses on the important browser objects (including the Window, Location and History objects) that are controllable via JavaScript, showing you how to manipulate and use them in your scripts.
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:
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>
JavaScript 
/ 120 
