Learn Advanced JavaScript Programming

Referencing Windows

When assigning the returned value of the window.open() method to a variable, that variable represents the window object of the new window in the originating window’s document.

When a document opens a new window by invoking the window.open() method, the opener property of the new window’s window object is the window object of the originating document’s window. The only way to change the opener property is by explicitly assigning it a new value. (Even unloading the document from the new window does not change it.) Figure 27-6 illustrates the relationship between an originating window and a new one.

Figure 27-6. A two-way connection is established between the originating window and the new one.

Later in this chapter we take a look at a popular application of windows—remotes.

Window Names

A window’s name is used for its targeting by the TARGET attribute of the <A>, <FORM>, or any other tags that support this attribute. A new window’s name can be passed to the window.open() method on its second argument. You cannot specify the window’s name, however, when you open a new window from the File menu, or when you launch the browser. In both cases, you can apply a name to a window by assigning it to the window’s window.name property.

It is a good practice to define names for all windows of a multiple-window site. Since a new window references its originating one, be sure to name the originating window as follows:

window.name = "name of window"

All objects feature a name property which differentiates each. The name property is extensively used in scripts which involve remotes, introduced in the following section.

Remotes

You have probably seen the button “Yahoo! Remote” while searching Yahoo!. When you click the button, a little window pops up and services your searching requests. When you use this window to search Yahoo!, the search engine’s results are loaded into the originating window instead of the new popped-up one. As with any other window, you can either minimize the new window, send it behind the main browser window, leave it alone, or call it back. This little device is called a remote, just like your TV’s.

The most important characteristic of a remote is that it must have access to its originating window. There are basically two ways to do that:

With plain HTML
Via JavaScript’s object model

HTML-Based Remotes (Recommended)

An HTML-based remote relies on the name property of its originating window’s window object. The remote can use the TARGET attribute of various HTML tags to target documents to the originating window. Take a look at the originating window’s document and the remote window’s HTML in Example 27-2.

<HTML>
<HEAD>
<TITLE>Remote Launcher</TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!--

window.name = "main"
function launchRemote() {
 remote = window.open("ex27-2a.htm", "remote", "height=120,width=490")
}

// -->
</SCRIPT>
</HEAD>
<BODY>
<FORM>
<INPUT TYPE= "button"VALUE="launch remote"onClick="launchRemote()">
</FORM>
</BODY>
</HTML>

Example 27-2 (ex27-2.htm). An HTML-based remote “launcher.”

The first statement of the script is an immediate one, and it sets the name of the originating window to main. When the user clicks the button, the function launchRemote() is invoked to open the remote window. Notice that the returned value of the open() method is assigned to a global variable. The document loaded into the new window is Example 27-2a:

<HTML>
<HEAD>
<TITLE>Remote</TITLE>
</HEAD>
<BODY BGCOLOR="#ffffff">
<A HREF="http://www.altavista.digital.com/" TARGET="main">
Altavista</A><BR>
<FORM METHOD="get" ACTION="http://www.altavista.digital.com/cgi-bin
/query" TARGET="main">
<INPUT TYPE="hidden" NAME="pg" VALUE="q">
<B>Search
<SELECT NAME="what">
<OPTION VALUE="web" SELECTED>the Web
<OPTION VALUE="news">Usenet
</SELECT>
and Display the Results
<SELECT NAME="fmt">
<OPTION VALUE="." SELECTED>in Standard Form
<OPTION VALUE="c">in Compact Form
<OPTION VALUE="d">in Detailed Form
</SELECT>
</B>
<BR>
<INPUT NAME="q" size=55 maxlength=200 VALUE="">
<INPUT TYPE=submit VALUE="Submit">
</FORM>
</BODY>
</HTML>

Example 27-2a—remote document (ex27-2a.htm). The remote document does not include any JavaScript statements!

The remote document consists of two important elements:

A link (to http://www.altavista.digital.com)
A form (submitted to http://www.altavista.digital.com/cgi-bin/query)

Figure 27-7 shows the remote alongside the originating window.

Figure 27-7. The originating Window and the remote window.

Since the form is targeted to main, the AltaVista server will display its search results in the originating window.

Instead of specifying the originating window’s name in its own source document, you might want to name it from the remote document, using the following statement:

window.opener.name = "main"

This statement must be an immediate one because it must execute before the user has a chance to click a link or send a document to the originating window.

JavaScript-Based Remote

A JavaScript-based remote relies only on JavaScript to connect between the originating window and the remote one. Example 27-3 shows how to use a JavaScript-based remote with links (it is more difficult to apply this technique to forms).

<HTML>
<HEAD>
<TITLE>Remote Launcher</TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!--

function launchRemote() {
 remote = window.open("ex27-3a.htm", "remote", "height=75,width=200")
}
// -->
</SCRIPT>
</HEAD>
<BODY>
<FORM>
<INPUT TYPE="button" VALUE="launch remote" onClick="launchRemote()">
</FORM>
</BODY>
</HTML>

Example 27-3 (ex27-3.htm). A JavaScript-based remote “launcher.”

Notice that you launch a JavaScript-based remote in the same way you launch an HTML-based remote. The only difference between the two is that we do not assign a string to the name property in JavaScript-based remotes (because it is not needed). Now, take a look at the following HTML document for the remote.

<HTML>
<HEAD>
<TITLE>Remote</TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!--

function fetch(url) {
 window.opener.location.href = url
}

// -->
</SCRIPT>
</HEAD>
<BODY BGCOLOR="#ffffff">
<A HREF="javascript:fetch('http://www.altavista.digital.com/')">
  Altavista</A><BR>
<A HREF="javascript:fetch('http://www.yahoo.com/')">Yahoo</A><BR>
<A HREF="javascript:fetch('http://www.lycos.com/')">Lycos</A>
</BODY>
</HTML>

Example 27-3a—remote document (ex27-3a.htm). Links are loaded in the source window via JavaScript.

Three hypertext links invoke the fetch() function, with the desired URL as an argument. By assigning it to the location.href property of the originating window’s window object, the function loads the new URL’s document in the originating window. After opening the remote window, the originating window’s window object is addressed as window.opener. Figure 27-8 shows both the originating window and the remote one, on the same desktop.

Figure 27-8. The originating and remove windows.

Table of Contents