Resize test window to:
Close test window 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: ------- next page Controlling Browser Properties with JavaScript - Bar Tales ( Page 4 of 8 ) 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. ----- next page 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: 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. 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: Close Display Window 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: Close Me! 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: Resize My Parent -------- next page Controlling Browser Properties with JavaScript - Location is Everything ( Page 6 of 8 ) 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: ----------------- next page Controlling Browser Properties with JavaScript - History Lesson ( Page 7 of 8 ) 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. You can, however, 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, meaning that you can go one step back with the following code: Which is equivalent to the following: 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. ------------ next page Controlling Browser Properties with JavaScript - Down to the Document ( Page 8 of 8 ) 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. As the example above illustrates, these methods make it possible to dynamically alter the contents of a page with JavaScript. Using DOM access methods, you can even focus the document.write() method on specific elements of the pages, writing - for example - directly inside a