Working with Windows: Referencing Windows

Working with Windows

Referencing Windows

When you create a new window, it's important to assign the value returned by the open() method to a variable. For example, the following statements create a new window and immediately close it:

win = window.open("https://www.docjs.com/", "js");
win.close();

Each browser window is associated with an explicit window object. Therefore, when you want to refer to the current window (the one containing your script), you should use the window object. The following statement sets the URL of the current window:

window.location.href = "https://www.docjs.com/";

When you put such a statement in a script, you don't need to specify the window object, because the existence of the current window is assumed:

location.href = "https://www.docjs.com/";

Note that self is equivalent to window, so self.close() is actually the same as window.close().

Closing a Window

The window.close() method closes the specified browser window. If you call close() without specifying a window reference, JavaScript closes the current window. In event handlers, you must specify window.close() instead of simply using close(). Due to the scoping of static objects in JavaScript, a call to close() without specifying an object name is equivalent to document.close().

If you invoke the close() method on a window that you did not open with script, a confirm dialog box lets the user choose whether the window closes. Navigator doesn't invoke the dialog box if the window has only one document (the current one) in its session history. However, if you use close() to exit the last running instance of the browser, the confirm box pops up (both browsers). Take a look at the confirm dialog box in Internet Explorer and Navigator:

The following links open a new window with the document tryclose.html:

Launch Window (with JavaScript)
Launch Window (with HTML)

The first link uses JavaScript's window.open() method to open a window, while the second link simply features a TARGET attribute:

<A HREF="javascript:void(window.open('tryclose.html'))">Launch Window (with JavaScript)</A><BR>
<A HREF="tryclose.html" TARGET="_blank">Launch Window (with HTML)</A>

The document tryclose.html displays a button that executes the window.close() method:

<FORM><INPUT TYPE="button" VALUE="Close Window" onClick="window.close()"></FORM>

When you use the first link to open the new window, the browser "remembers" that you opened it with a script. So when you click the button, the new window closes without prompting you to confirm the operation. The second link is a different story. It opens a new window without any JavaScript. When you click the button, Internet Explorer displays the confirm dialog box. However, Navigator immediately closes the window, because the new window doesn't have any other documents in its session history (besides tryclose.html).

JavaScript allows you to close a window from a script in another window. We'll take a look at this feature later in the column.

Click-to-Close Windows

Many standard applications present an About box that closes when the user clicks the mouse anywhere in the box. We'll use JavaScript to apply the same effect to a window. First, here's the code that opens the new window:

<SCRIPT LANGUAGE="JavaScript">
<!--
function launchAbout() {
  about = window.open("about.html", "about", "height=75,width=250");
  return false;
}
// -->
</SCRIPT>
<A HREF="about.html" onClick="return launchAbout()">About</A>

Click the following link to launch the new window:

About

A new window opens when you click this link. You can close the new window by clicking anywhere inside it. We use the following script in the HEAD portion of the about.html document:

<SCRIPT LANGUAGE="JavaScript">
<!--
function closeWin() {
  window.close();
}
if (window.Event) document.captureEvents(Event.ONCLICK);
document.onclick = closeWin;
// -->
</SCRIPT>

For more information about events, refer to Column 9, The Navigator Event Model, Column 10, The Internet Explorer Event Model, and Column 11, The Cross-Browser Event Model. For a similar keyboard implementation, see Hot Keys (November 24, 1999).

Dependent Windows

The dependent window feature specifies whether the window should be a dependent child of the current (opener) window. A dependent window closes when its parent window closes. The dependent feature is only supported by Navigator 4 and above. However, we can use a bit of JavaScript to deliver a cross-browser solution. Let's use the following function to open our dependent window:

function openDep() {
  win = window.open("depwin.html", "dep", "height=200,width=400");
}

We'll include an onUnload event handler to close the dependent window when the current window closes or a new URL is loaded:

<BODY onUnload="closeDep()">

Note that the new window will close when the current document unloads, even if the current window is still open. Here's the code for the closeDep() function:

function closeDep() {
  if (win && win.open && !win.closed) win.close();
}

Notice that we must check if the window exists before we attempt to close it. Go ahead and take a look at a full demonstration.

Next: How to manipulate a window

Produced by Yehuda Shiran and Tomer Shiran

Created: April 10, 2000
Revised: April 10, 2000

URL: https://www.webreference.com/js/tutorial1/reference.html