Professional JavaScript for Web Developers: JavaScript in the Browser, Pt. 2

Navigating and opening new windows

Using JavaScript, it is possible to navigate to URLs and open new browser windows using the window.open() method. This method accepts four arguments: the URL of the page to load in the new window, the name of the new window (for targeting purposes), a string of features, and a Boolean value indicating whether the loaded page should take the place of the currently loaded page. Typically, only the first three arguments are used because the last one has an effect only when calling window.open() doesn't open a new window.

If window.open() is called with the name of an existing frame as the second argument, the URL is then loaded into the frame with that name. For example, to load a page into the frame named "topFrame", the following code does the trick:

window.open("https://www.wrox.com/", "topFrame");

This line of code behaves as if a user clicked a link with the href set to https://www.wrox.com/ and the target set to "topFrame". The special frame names _self, _parent, _top, and _blank are also valid.

If the name specified isn't a valid frame name, then window.open() opens a new window with features based on the third argument (feature string) of the method. If the third argument is missing, a new browser window is opened as if you had clicked a link with target set to _blank. This means that the new browser window is displayed with the exact same settings as the default browser window (toolbars, location, and statusbar are all visible).

When the third argument is used, it is assumed that a new window should be opened. The feature string, which is a comma-separated list of settings, defines certain aspects of the newly created window. The following table displays the various settings:

As mentioned previously, the feature string is comma-delimited and, therefore, must contain no space before or after a comma or equal sign. For example, the following string is invalid:

window.open("https://www.wrox.com/", "wroxwindow", "height=150, width= 300, top=10, left= 10, resizable =yes");

This string won't work because of the spaces after the commas and other spaces around a couple of equal signs. Just remove the spaces and it works fine:

window.open("https://www.wrox.com/", "wroxwindow",

     "height=150,width=300,top=10,left=10,resizable=yes");

The window.open() method returns a window object as its function value that is also the window object for the newly created window (or for the frame, if the name given is the name of an existing frame). Using this object, it's possible to manipulate the new window:

var oNewWin = window.open("https://www.wrox.com/", "wroxwindow",

     "height=150,width=300,top=10,left=10,resizable=yes");
oNewWin.moveTo(100, 100);

oNewWin.resizeTo(200, 200);

Also using this object, it is possible to close the new window using the close() method:

oNewWin.close();

If there is code in the new window, it can close itself by using:

window.close();

This only works in the new window. If you try to call window.close() in the main browser window, you get a message saying that a script is trying to close the window and asking if you actually want it to close. The general rule to remember is this: Scripts can close any windows that they open, but no others.

A new window also has a reference to the window that opened it stored in the opener property. The opener property exists only on the topmost window object of the new window, making it safer to use top.opener to access it. Example:

var oNewWin = window.open("https://www.wrox.com/", "wroxwindow",

     "height=150,width=300,top=10,left=10,resizable=yes");
alert(oNewWin.opener == window); //outputs "true"

In this example, a new window is opened and then its opener property is tested against the window object to prove that opener does indeed point to window (this alert displays "true").

Opening new windows can be helpful to users in some instances, but generally speaking it's better to keep pop-up windows to a minimum. A large industry has popped up (no pun intended) selling pop-up ads on Web sites, which most users find incredibly annoying. To this end, many users have installed pop-up blockers that automatically block all pop-up windows unless the user specifically allows them. Remember, pop-up blockers don't know the difference between a legitimate pop-up window and an advertisement, so it's always best to warn a user when a window is going to be popped up.

System dialogs

Aside from popping up new browser windows, several other methods pop up information to the user utilizing methods of the window object: alert(), confirm(), and input().

You are already familiar with the syntax of a call to alert() because it has been used in a large number of examples up to this point. This method accepts one argument, which is the text to display to the user. When alert() is called, the browser creates a system message box that displays the given text with an OK button. For example, the following line of code causes the message box in Figure 5-6 to be displayed:

alert("Hello world! ");

Alert dialogs are typically used when users must be made aware of something that they have no control over, such as errors. Often alert dialogs are displayed when the user has entered invalid data into a form.

The second type of dialog is displayed by calling confirm(). A confirm dialog looks similar to an alert dialog in that it displays a message to the user. The main difference between the two is the presence of a Cancel button along with the OK button in the confirm dialog, which allows the user to indicate if a given action should be taken. For example, the following line of code displays the confirm dialog shown in Figure 5-7:

confirm("Are you sure? ");

To determine if the user clicked OK or Cancel, the confirm() method returns a Boolean value: true if OK was clicked, false if Cancel was clicked. Typical usage of a confirm dialog usually looks like this:

if (confirm("Are you sure? ")) {

     alert("I'm so glad you're sure! ");

} else {

     alert("I'm sorry to hear you're not sure. ");

}

In this example, the confirm dialog is displayed to the user in the first line, which is a condition of the if statement. If the user clicks OK, an alert is displayed saying, "I'm so glad you're sure!" If, however, the Cancel button is clicked, an alert is displayed saying, "I'm sorry to hear you're not sure." This type of construct is often used when the user tries to delete something, such as an e-mail in his or her inbox.

The final dialog is displayed by calling prompt(), and as you might expect, this dialog prompts for input from the user. Along with OK and Cancel buttons, this dialog also has a text box where the user is asked to enter some data. The prompt() method accepts two arguments: the text to display to the user and the default value for the text box (which can be an empty string if you so desire). The following line results in the window displayed in Figure 5-8 being shown:

prompt("What's your name? ", "Michael");

The value in the text box is returned as the function value if the OK button is clicked; if the Cancel button is clicked, null is returned. The prompt() method is often used like this:

var sResult = prompt("What is your name? ", "");

if (sResult != null) {

  alert("Welcome, " + sResult);

}

I have a few final points to cover regarding these three dialogs. First, all the dialog windows are system windows, meaning that they may appear different on different operating systems (and sometimes, on different browsers). This also means that you have no control over the display of the window in terms of fonts, colors, and so on.

Second, the dialogs are all modal, meaning that the user cannot do anything else in the browser until the dialog is dismissed by clicking the OK button or Cancel buttons. This is a common method of controlling user behavior to ensure that important information is delivered in a secure way.

Created: March 27, 2003
Revised: June 27, 2005

URL: https://webreference.com/programming/prof_java2/1

Professional JavaScript for Web Developers: JavaScript in the Browser, Pt. 2