The JavaScript Diaries: Part 7/Page 2

The JavaScript Diaries: Part 7

The `window` Object

At the top level of the BOM is the window object. This object is comprised of the entire browser window, including the document displayed within the window. All the other objects are child objects of the window object. As I mentioned before, objects are containers, and in this case, the window object is the container that also holds the other objects. Think of it as a big toy box and the other objects in the hierarchy are the toys. The document object, while being a toy, is also a smaller toy box inside the bigger window object. It holds other toys but is contained within the window object. (This is not to diminish the importance of the DOM, of which the document object is at the top of its hierarchy. It's crucial in manipulating documents within the browser window.)

The window object has several properties, methods, and events. We'll be looking at the more commonly used ones (which are cross-browser compatible).

Properties	Methods	Event Handlers
`closed` `defaultStatus` `frames` `name` `opener` `parent` `self` `status` `top` `window`	`alert()` `blur()` `close()` `confirm()` `focus()` `moveBy()` `moveTo()` `open()` `print()` `prompt()` `resizeBy()` `resizeTo()` `scrollBy()` `scrollTo()` `setInterval()` `clearInterval()` `setTimeout()` `clearTimeout()`	`onLoad` `onUnload` `onFocus` `onBlur` `onError` `onResize`

As you can see in the table above, you have already worked with some of the window methods, e.g., alert(), confirm() and prompt().

Properties

First, we'll take a look at the window properties. I said previously that a property is a component or part of the object. If we think of a car as an object, a car's properties may include a radio and tires. Properties are data containers, just like variables. Besides being a part of an object, they also give information about the object. One important difference is that properties give information about the window object whereas variables do not. An object holds properties that can be accessed from the outside for use in the overall script.

closed

This property is used to check if a window you had previously opened has been closed. It has a Boolean value: it will return true if the window is closed; otherwise, its value is false.

If you write a script that retrieves information from a form in another window, and that window has been closed, it will cause an error in the script. To make sure there's no error, you can write a short script using the closed property to check if the window is still open. An example of such a script is shown below. Place the following script in the <head> portion of an HTML document.

<script type="text/javascript">
<!--
var newWin;
function popNewWin() {
  newWin=window.open("","","status,width=200,height=200,top=300,left=300");
}
function checkWin() {
  if (!newWin || newWin.closed) {
    alert("The window has been closed!");
  }
  else {
    newWin.focus();
  }
}
//-->
</script>

Next, place the following code in the <body> portion.

<form>
<input type="button" name="win" value="Open window" onClick="popNewWin()"><br>
<input type="button" name="win" value="Check window" onClick="checkWin()">
</form>

Let's take a look at what's happening here.

We declared a variable named newWin but didn't initialize it. A value will be given to it in the popNewWin function. If we didn't declare it here, we would get an error when we checked to see if the window using this variable was open. If the window is not open, then the script would produce an error as the variable wouldn't have been declared yet.
Next, we created a function, popNewWin.
We then initialized the variable newWin with the value of a window.open() statement.

window.open() is a method of the window object. It's used to open a new browser window with specified attributes. We'll look at methods in more detail in our next session but for now let's look at the parameters set forth in this statement:
The two sets of double quotes hold the URL of the file to be opened followed by the name of the window. In our case, we are opening a blank, new window.
Next, we listed the attributes to be used in displaying the window. We said to show the status bar, size the window to 200 pixels wide by 200 pixels high, and place it 300 pixels from the top of the current browser window and 300 pixels from the left side of the current browser window.

Next, we created another function, checkWin.

We then wrote an if/else statement that said:

if the variable newWin does not exist (using the Boolean operator !, meaning "not") or (the Boolean operator ||) the window named newWin is closed, display an alert window with the message, "The window has been closed!";
otherwise, bring the window which is linked to the variable newWin to the foreground, using the focus method of the window object.

Next, using the HTML form element, we created two buttons.

One button opens the newly created window by calling the popNewWin function.
The other button checks to see if the window was closed by calling the checkWin function.
- We used the onClick event handler in the links. It means that, when the link is clicked on, perform the stated action, which in this case is to execute a JavaScript function. More on event handlers later.

When used with the opener property below, you can check to see if the window that opened it has been closed:

if (window.opener.closed) {
  .....
}

Basically, it says to check to see if a window opened by the current window has been closed. It knows which window to refer to in the statement.

[previous] [next]

Created: July 22, 2005

URL:

The JavaScript Diaries: Part 7/Page 2