Learn Advanced JavaScript Programming

Another Algorithm to Open Windows

Yahoo! was the first to feature a remote for its site. Other sites followed suit, using exactly the same code (with different variable names, of course). Eventually, a standard algorithm for opening windows has emerged. Here is the function that opens the window:

function launch() {
  var remote = null
  remote = window.open(",'remote','width=100,height=250,resizable')
  if (remote I = null) {
if (remote.opener == null)
  remote.opener = self
remote.location.href = 'http://www.lycos.com/remote.htm'
  }
}

First, the new window opens without an intial document in it. If the value of remote remains null, it is an indication that the remote failed to load for some reason and the function terminates. If the new window's opener property is null, the function explicitly assigns it the originating window. The desired URL is then loaded into the remote by assigning its location.href property.

Closing a Window

You can use JavaScript’s close() method to close a window that has been opened via JavaScript’s open() method. Attempting to close any other window results in a confirmation dialog box which asks the user whether to close the window or not. This security feature is designed to prevent “mail bombs” containing self.close() (yes, people did do that!). However, if the window has only one document (the current one) in its session history, closing is allowed without any confirmation. The general syntax of the close() method is as follows:

windowReference.close()

You can use this method to create a customized alert dialog box with an OK dismissing button, as demonstrated in Example 27-4.

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

function makeAlert(height, width, message) {
 var win = window.open("", "", "height=" + height + ",width=" + width)
 win.document.open()
 var text = ""
 text += "<HTML><HEAD><TITLE>Alert</TITLE></HEAD><BODY BGCOLOR=
'#ffffff'>"
 text += message + "<FORM><CENTER>"
 text += "<INPUT TYPE='button' VALUE='OK' onClick=
'self.close()'>"
 text += "</CENTER></FORM></BODY></HTML>"
 win.document.write(text)
 win.document.close()
}

// -->
</SCRIPT>
</HEAD>
<BODY>
<FORM>
<INPUT
 TYPE="button"
 VALUE="make an alert"
 onClick="makeAlert(85, 200, '<CENTER>This is a custom alert!
  </CENTER>')">
</FORM>
</BODY>
</HTML>

Example 27-4 (ex 27-4.htm). A customized alert dialog box with an OK button.

Load Example 27-4 in your browser, and click the button. A small window, consisting of a short message and an OK button (see Figure 27-9), should pop up. Click OK to close the window.

Figure 27-9. A regular window resembling an alert dialog box

Scrolling a Window

The scroll() method enables you to scroll a window to specified coordinates. This method is not implemented in Netscape Navigator 2.0x and Microsoft Internet Explorer 3.0x. The general syntax is:

windowReference.scroll(x-coordinate, y-coordinate)

Both arguments (the x and y coordinates) are specified in pixels. A document’s upper left coordinates are 0, 0. Navigator 3.0x does not provide an event handler for a user-initiated scrolling (no onScroll event handler), so you cannot create an application where a user’s scrolling of one window triggers an automatic scrolling of another window.

Windows, Events, and Event Handlers

Windows support the focus event by the onFocus event handler and the focus() method. Similarly, they support the blur event by the onBlur event handler and the blur() method. For more details, see the listings for these event handlers and methods in the previous chapter about frames.

Netscape Navigator 3.0x introduced the capability to focus on a window, by bringing it in front of all other windows. You can use the following statement from within a script to put focus on a window:

windowReference.focus()

windowReference is the name of the window’s window object. You can use the blur() method to send a browser window behind the main window:

windowReference.blur()

A classic application of these methods to remotes and other floating toolbar-type windows is a window that always stays in front of other windows. When using such a window, you should provide a way to stop the “always-on-top” script, and you should also ensure that only one “always-on-top” window exists at any given period. Example 27-5 shows how to create an “always-on-top” window with these special restrictions.

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

window.name = "main"
var onTop = false
function launchRemote() {
 remote = window.open("ex27-5a.htm", "remote", "height=200,width=490")
}

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

Example 27-5 (ex27-5.htm). The source document that opens the new window.

Example 27-5 is almost identical to Example 27-2. The only differences are:

The onTop variable indicates if there is currently a window which is being kept “on top.” This variable only refers to the status of windows that were opened by the originating one.
The initial URL of the new window is ex27-5a.htm.

Here is the document for the new window:

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

var onTop = false

function toggle() {
 if (opener.onTop && !onTop) return
 if (!onTop)
  self.focus()
 onTop = !onTop
 opener.onTop = onTop
 document.controls.status.value = (onTop) ? 'focus forced' :
  'focus not forced'
}

function focusRemote() {
 if (onTop)
  setTimeout('self.focus()', 200)
}
// -->
</SCRIPT>
</HEAD>
<BODY BGCOLOR="#ffffff" onBlur="focusRemote()" onLoad="toggle()">
<FORM NAME="controls">
<TABLE BORDER=2>
<TR><TD>
<INPUT TYPE="button" VALUE="TOGGLE" onClick="toggle()">
<INPUT TYPE="text" VALUE="focus not forced" SIZE=15 NAME="status">
</TD></TR>
</TABLE>
</FORM>

<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-5a—remote document (ex27-5a.htm). The document for the new window.

Table of Contents