Coding The Client
Starting At The Top
I'll begin at the beginning, with the top-level Window object. The Window object is at the top of the DOM hierarchy; all other nodes are under it, including objects representing the document's frames, forms, images, links and styles. This object comes with a bunch of useful methods, of which the two most commonly-used ones are the open() and close() methods.
Here's an example of using the Window object's open() method to open a new browser window:
As you will see when you run it in a browser, this line of code opens up a new window and loads the URL "http://localhost" into it. Thus, the first argument to window.open() is always the URL to be loaded, while the second is the window name.
You can also control the appearance of the window, by adding a third argument - a comma-separated list of window attributes. Here's an example:
Here's a brief list of the important attributes that window.open() lets you control:
"width" - controls the width of the new window
"height" - controls the height of the new window
"location" - toggles the address or location box
"toolbar" - toggles the toolbar
"status" - toggles the status bar
"menubar" - toggles the menu bar
"scrollbars" - toggles the scrollbars
"directories" - toggles the directories or links bar
"resizable" - is the window resizable ?
These attributes can be turned on or off by equating them with either a 1 or 0. Height and width values must be specified in pixels.
Thus, if you wanted to open a window with the address bar and status bar off, but the links bar on, you would use this code:
while if you wanted a window of height 640 and width 480, non-resizable and with no bars showing, you could use this code:
Note that leaving the third argument to window.open() empty pops open a window with default settings. Note also that you should not leave spaces between the various window attributes listed in the third argument to window.open() - they can cause problems with certain browsers.
Now, how about closing a window that you've opened? It's pretty easy - just use the window.close() method, as in the following example:
You might not know this, but the alert() function you call every time you want a pop-up on your page is actually a method of the Window object. Take a look:
There's also a window.confirm() method, which displays a confirmation box with a message and two buttons. Depending on the button you pick, the method returns true or false. Take a look at the next example, which demonstrates:
Finally, the window.prompt() method pops up an input box and stores the user's input in a variable. The following example illustrates:
You can move a window to the front of the window stack by calling the window.focus() method (remember to use the window name when calling this method, or you won't see anything special happen), and the window.blur() method to move a window to the back of the stack. Consider the following example, which creates a child window and then allows you to move it to the front and back of the window stack using these methods:
You can resize a window by calling the window's resizeTo() method, as in the example below:
Consider the following example, which allows you to input height and width values into a form, and uses these values to adjust the target window's height and width appropriately:
The status bar, located at the bottom of the browser window, has long been a territory abused by unimaginative developers. The default text that appears in this area may be altered via the Window object's "status" property, as in the following example:
A common use of the "status" property is to display a scrolling ticker-tape in the status bar. Here's how:
In this case, I've created the appearance of a moving tickertape by taking one character off the beginning of the message string and adding it to the end. Each time the tickerTape() function calls itself, the first character of the string is deleted and added to the end of the string, simulating a scrolling ticker-tape. The setTimeout() function performs this add-and-remove function once every 75 milliseconds. Finally, the "status" property is used to assign the result at each stage to the browser's status bar.
Navigating The Family Tree
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
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.
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:
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:
Location Is Everything
If it's the browser URL you want to manipulate, you can't go wrong with the Location object, which exists under the Window object. This object has two important methods and three important properties - the latter are illustrated in the example below:
The "href", "host" and "protocol" properties of the Location object return the current URL, host name and protocol being used respectively. Of these, you can use the "href" property to redirect the browser to a new URL, simply by giving it a new value. The following example shows you how:
An alternative way to accomplish the above is to redirect the browser to a new URL with the replace() method, as in the following example:
You can also refresh the page by reloading it with the browser's current URL with the reload() method. This method comes in particularly handy if you need to refresh a page at a pre-defined interval. Consider the following example, which illustrates:
Here, I've set a timeout for the page that makes it reload every 600000 milliseconds, or 10 minutes, by combining the setTimeout() method with the location.reload() method.
As you travel from one Web site to another, most browsers record the URLs you visit in a history buffer, allowing you to return to them at any time with a single click. This history buffer is accessible to you via the History object, which exposes methods and properties for moving forward and backward through the list of recently-accessed URLs.
In order to access the last URL in the, you would use the history.back() method (equivalent to hitting the browser's "Back" button),
while the history.forward() method lets you access the next URL in the history list (equivalent to hitting the browser's "Forward" button).
Here's an example which illustrates how these two methods can be used to build a simple navigation toolbar:
You can obtain the total number of items in the history list through the History object's "length" property, as below:
You cannot access the elements of the history list directly - however, you can tell the browser to go to a particular URL from the history list with the history.go() method, which accepts an offset indicating which URL in the history list to go to. In this system, the current URL is always 0 - which means that you can go one step back with
which is equivalent to
Finally, note that the History object is limited to storing URLs that have been visited in that window itself. To access history items in other windows, use the window name as prefix.
Down To The Document
Under the top-level Window object, comes the Document object. This object represents the head and body of the HTML page loaded in the browser, including all its images, forms and links. Like the Window object, this one too comes with its own methods and properties.
One of the Document object's commonly-used properties is the write() method, which can be used to write text to the Web page at run-time. Take a look at the following example, which demonstrates how this works:
Here, when the user enters some data into the form input box and clicks the "Write!" button, the writeToDoc() function is invoked. This function first reads the data entered by the user into a variable, then begins writing to the document. This writing process consists of first opening a stream to the document with document.open(), then writing to it with document.write() and then closing the stream with document.close(). The data written to the document is displayed only after document.close() is called.
<div> or altering form contents on the fly, in response to user input or external events.
All the other elements of the page - forms, links, images - are organized under the Document object as arrays. Using the Document object as base, therefore, it's easy to access any of these elements and manipulate them (I've done this in some of the previous examples, to access form values). Take a look at this next example, which uses these object arrays to return some statistics about the number of links, images and forms within the document:
Since the images, forms and links within a document are structured as arrays under the Document object, it's easy to calculate the total number of items of each type - simply obtain the size of the corresponding array.
Of course, there's a lot more you can do with the Document object. Sadly, however, most of it involves manipulating the contents of the HTML document, not of the browser displaying it, and therefore doesn't fall under the ambit of this tutorial. If you're interested, though, you will find the following links most instructive:
And that's about all I have time for at the moment. See you soon!
Note: Examples are illustrative only, and are not meant for a production environment. Examples have been tested on Microsoft Internet Explorer 5.x only. Melonfire provides no warranties or support for the source code described in this article. YMMV!This article was first published on 21 Nov 2003.