Learn Advanced JavaScript Programming

Table of Contents

The first statement sets the variable onTop to false. Since it belongs to a different window object, the variable onTop in Example 27-5a is different than the variable onTop in Example 27-5. You can access, though, the onTop variable in Example 27-5 through opener.onTop. When the document in the new window is loaded, the onLoad event handler invokes the toggle() function, which turns on and off the “always-on-top” mode. After the toggle() function verifies that there is currently no other window which is in “always-on-top” mode (opener.onTop is true), it puts the remote window in focus. The Boolean value of onTop is then negated, and the text field displaying the current mode is updated. Note that each click on the TOGGLE button initiates the toggle() function.

Whenever the user removes focus from the window, the onBlur event handler calls the focusRemote() function, which repeatedly gives the window focus, provided that it is in “always-on-top” mode.

Accessing a Window’s Objects—An Example

In order to manipulate a window’s objects via JavaScript, you need to have a reference to the window’s window object. This is why, when referencing a new window from its originating one, you should assign the returned value of the window.open() method to a variable. On the other hand, you should use the opener property when referencing an originating window from a new one. In the following example, we show how a script in one window can handle forms in two different windows. The originating window in Example 27-6 features a large text area with a few buttons, and a new remote one that includes some form elements, mimicking command buttons of an HTML editor. The editing zone is the text area in the originating window, whereas the buttons and HTML shortcuts are in the remote. Figure 27-10 shows both windows.

Figure 27-10. A two-piece JavaScript HTML editor.

Here is the source document:

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

window.name = "source"
function launchEditor() {
 editor = window.open("ex27-6a.htm", "editor", "height=330,width=230")
}

function viewPage() {
 view = window.open("", "view")
 view.document.open()
 view.document.write(document.forms[0].elements[0].value) // value
   of text area
 view.document.write("<BR>") // solves a bug
 view.document.close()
}

// -->
</SCRIPT>
</HEAD>
<BODY onLoad="launchEditor()" BGCOLOR="#ffffff">
<FORM ACTION="mailto:any@email.address" METHOD="post">
<CENTER>
<TABLE BORDER=0 CELLPADDING=2>
<TR><TD BGCOLOR="#ffffcc">
<CENTER>
<FONT SIZE=+2>JavaScript HTML Editor</FONT>
</CENTER>
</TD></TR>
<TR><TD>
<TEXTAREA COLS=50 ROWS=20 NAME="body"></TEXTAREA>
</TD></TR>
<TR><TD BGCOLOR="#ffffcc">
<CENTER>
<INPUT TYPE="button" VALUE="launch editor" onClick="launchEditor()">
<INPUT TYPE="button" VALUE="view page" onClick="viewPage()">
<INPUT TYPE="submit" VALUE="submit document">
</CENTER>
</TD></TR>
</TABLE>
</CENTER>
</FORM>
</BODY>
</HTML>

Example 27-6 (ex27-6.htm). The source document consists of a large text area and some buttons.

The source document (ex27-6.htm) creates a text area and some buttons below it. When the document loads, the onLoad event handler invokes the launchEditor() function, which generates a new window containing the HTML editing tools. That function consists of one statement that opens the new window and loads ex27-6a.htm into it.

Notice that the text area is named body, because the new remote window (editor) references it by that name. If the window fails to open automatically when the document loads, or is accidentally closed by the user, the user can open the new window explicitly via a button. The “view page” button calls the viewPage() function to create a new window and to write the HTML output in the text area of that window. Take another look at the function:

function viewPage() {
 view = window.open("", "view")
 view.document.open()
 view.document.write(document.forms[0].elements[0].value) // value
   of text area
 view.document.write("<BR>") // solves a bug
 view.document.close()
}

Table of Contents