When you open your browser, an instance of a window object is created, and that object's properties become available for your inspection or use. These properties are accessible using the formats shown in Figure 7-3.

property
window.property
self.property

top.property
parent.property
top.frame.property
parent.frame.property

Window properties can be referenced with the prefix window or self (a self-reference to the current window), or by using just the property name wherein the window or self prefix is assumed.

Frame References

In a frames environment, references are to the current frame unless specified otherwise. A reference to the top-most window of a frameset (usually the main browser window) must include the top. prefix. A reference to parent.property points to the next outer-most frameset, which is equivalent to top.property in a single frameset.

A reference from within one frame to the property of a different frame must include the frame name, but with a twist. Within a frameset, one frame cannot directly reference a second frame; a "horizontal" reference cannot be made between two frames at the same level in a frameset. Rather, all frames are viewable and accessible only from the perspective of their container frameset, usually the full browser window. Therefore, it is necessary that property references between frames be prefixed with top.frame or parent.frame in order to "back up" a level to the parent frameset from where all frames are visible. This process of referencing frames is very much like traversing a directory tree to link from one page to another. It is often necessary to back up a directory level (../) prior to heading down the directory tree to get to a linked page in a different folder: <a href="../folder/page.htm">.

Common Window Properties

Below are shown common window object properties for setting or viewing. Properties are reported for the current window you are viewing using inline scripts in the format

<script type"text/javascript">
  document.write("<b>" + top.property + "</b>");
</script>

Status Bar Messages

The defaultStatus property is a reference to the status bar appearing along the bottom of the browser window. The status bar is normally blank, displays "Done," or shows the URL of a page when the mouse cursor is positioned over a link. You can, however, assign a string value to the status bar through the defaultStatus property; e.g.,

window.defaultStatus = "This page discusses window properties."
window.defaultStatus = ""

Sometimes status messages can be irritating to the user, so use them with discretion and for good reason.

Frame Count

The length property gives the number of frames in a frameset. It is 0 for a single browser window without frames or from the viewpoint of a page inside a frame that is not further subdivided into a frameset. The number of frames in a frameset as viewed from the main browser window is given by the property top.length. This is a read-only property.

Scripted Links

The location property is extremely useful in setting up scripted links. It has the same effect as an XHTML <a> (anchor) tag but with scripted control. By using the location property along with other DHTML settings you can create links without using the <a> tag. In the following example, a <span> tag is scripted to look and act like an <a> tag.

<b>A scripted link:</b>
<span style="color:blue; text-decoration:underline; cursor:hand"
  onmouseover="this.style.fontWeight='bold'"
  onmouseout="this.style.fontWeight='normal'"
  onmousedown="this.style.color='red'"
  onmouseup="this.style.color='blue'"
  onclick="location='http://www.google.com'">
    Link to Google
</span>

A script is provided for each mouse event—onmouseover, onmouseout, onmousedown, onmouseup, and onclick—the latter activating the URL link. When linking to external sites, the location property must include the absolute URL, including the protocol "http://". Relative URLs can be coded for local Web page links.

In the above example, the URL opens in the current window. If the page containing this link is part of a frameset, the linked page opens in the current frame. To open a page in the main browser window, the property top.location must be used. To open a URL in a different frame, the location property is prefixed with the frame name: top.frame.location.

In order to open a link in a separate browser window, you cannot use the target property as you can with an <a> link. Rather, you need to script its opening in what is called a "secondary window." This technique is covered later.

When scripting links, it is sometimes useful to know which page currently occupies a window. This situation arises in a frameset where one frame controls the pages that are loaded into a different frame. In the following script, a document in one frame (Frame1) determines what page is currently being displayed in a second frame (Frame2). On the basis of this determination one of two pages is loaded into the second frame.

<script type="text/javascript">

function LoadPage()
{
  var CurrentPage = top.Frame2.location.toString();
  if (CurrentPage.indexOf("FirstPage.htm") != -1) {
    top.Frame2.location = "NextFirstPage.htm";
  }
  else if (CurrentPage.indexOf("SecondPage.htm") != -1) {
    top.Frame2.location = "NextSecondPage.htm";
  }
}

</script>

<a href="javascript:" onclick="LoadPage()">Next Page</a>

First, notice that script references are to top.Frame2. From inside the first frame, containing this script, Frame2 is not visible. Both Frame1 and Frame2 are at the same level within the frameset, therefore, it is necessary back up a level to view both frames from the perspective of the top level, the main browser window.

At the beginning of this script, the URL of the page currently occupying Frame2 is saved as a string to variable CurrentPage. It is saved as a string since the indexOf() string method is subsequently applied to it. The indexOf() method determines whether the URL contains substring "FirstPage.htm" or "SecondPage.htm", and one of two follow-up pages is assigned to the location property of that frame. The follow-up page is immediated loaded and displayed in the frame.

Using a Link to Call a Function

This example uses an <a> tag to trigger the script, unlike in previous examples where buttons are normally used. As you will come to realize, almost any tag can trigger a script given proper coding.

In the case of an <a> tag used for a function call, the href="url" attribute is missing; instead, the attribute is nullified and replaced by "javascript:" (including the colon). Doing so indicates that the tag runs a script rather than links to a URL. In this example, function LoadPage() is called on a click event associated with the tag.

Screen Properties

The window object can be used to gain access to the screen object, which has properties related to the video display on which the browser is opened. This screen reference is in the format shown in Figure 7-6.

[window.]screen.property

Below are listed various screen properties. These properties are displayed for the monitor you are currently using with inline scripts in the format

<script type"text/javascript">
  document.write("<b>" + screen.property + "</b>");
</script>

The width and height measurements for a screen are needed when positioning the browser window at precise locations on the screen. Normally this is done in conjunction with new windows created under script control, a topic that is taken up later.

The vertical and horizontal scroll bars for a window or frame have style properties related to their appearance. These are properties of the document object, rather than the window object, and are discussed later.