Working with Windows: Opening Windows

Working with Windows

Opening Windows

When you open a new window with a simple link or form, you don't have any control over the features of the new window. The browser opens a new window with its default features. Furthermore, you can't reference the new window's window object with JavaScript, so you can't manipulate the new window's properties. Take a look at the following JavaScript statement:

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

This statement opens a new window to display our front page (https://www.docjs.com/). It sets the name of the new window to "win". The basic syntax of the window object's open() method is:

window.open(sURL, sName);

Both arguments are optional. If you don't want to specify a URL or a window name, use an empty string ("").

sURL is a string that specifies the URL of the document to display. If no URL is specified, a new, empty window is created. sName is a string that specifies the name of the window. This name is used as the value for the TARGET attribute of a <FORM> or <A> tag. In Internet Explorer 5 and later, specifying the value "_search" opens sURL in the browser's search pane.

What happens if we execute the window.open() method twice, with the same sName argument? Like HTML-generated windows, if you specify the name of a window that already exists, open() simply uses that existing window rather than opening a new one. Take a look at the following script:

window.open("https://www.javascript.com/", "win");
window.open("https://www.docjs.com/", "win");

If you execute these statements, the browser opens a new window named "win" to display the www.javascript.com page. But the second statement then replaces the URL of the new window with www.docjs.com. The following statements generate two different windows to display these Web sites:

window.open("https://www.javascript.com/", "win1");
window.open("https://www.docjs.com/", "win2");

Go ahead and run these statements. The browser opens two new windows. The first one, named "win1", loads the URL www.javascript.com, while the other window, named "win2", loads the URL www.docjs.com. Note that www.docjs.com is the same as www.webreference.com/js.

If we don't specify a name for the new window, the browser automatically launches a new window. The same applies to the name "_blank", but an empty string is another story. There are several important differences between Internet Explorer and Navigator:

window.open("https://www.cnn.com/");
window.open("https://www.usatoday.com/");

window.open("https://www.cnn.com/", "_blank");
window.open("https://www.usatoday.com/", "_blank");

window.open("https://www.cnn.com/", "");
window.open("https://www.usatoday.com/", "");

The bottom line is that you should never use an empty string for the sName parameter of the window.open() method. If you want to name the window, give it a reasonable name (not ""). If you don't want to name it, don't specify the argument at all, or use the special target "_blank".

An important point about the open() method is that it is almost always invoked as window.open(), even though window refers to the global object and should therefore be entirely optional. Since the document object also has an open() method, specifying the window object when we want to open a new window is essential for clarity. In event handlers, you must specify window.open() instead of simply using open(). Due to the scoping of static objects in JavaScript, a call to open() without specifying an object name is equivalent to document.open(). When the event handler of an HTML button executes, for example, the scope chain includes the Button object, the Form object, the Document object, and finally, the Window object that contains the document. Thus, if such an event handler refers to the open() method, this identifier ends up being resolved in the Document object, and the event handler opens a new document rather than opening a new window.

The Return Value

To handle references to the subwindow properly, you should always assign the result of a window.open() call to a variable. A call to the window.open() method returns a value of the new window's object if the window opens successfully, or null if it fails (due to low memory, for example). This value is vitally important if your script needs to address elements of that new window. After the new window is open, however, no parent-child relationship exists between the windows. Take a look at the following statement:

var recentTips = window.open("https://www.docjs.com/tips/", "tips");

Here we are assigning the new window's window object to a variable named recentTips. If you are invoking the window.open() method inside a function, be sure to omit the var keyword, because the variable should be global. Otherwise, the window's reference is located in a local variable, and cannot be accessed after the function's execution ends. The following statement displays the URL of the new window in an alert dialog box:

alert(recentTips.location.href);

You can also change the URL of the new window via its reference:

recentTips.location.href = "https://www.usatoday.com/";

In the previous section of this column you learned how to open a new window with HTML links and forms. By specifying a TARGET attribute or assigning a value to the window object's name property we were able to name the window. But how can we reference an existing window by its HTML name? The answer is simple. If you invoke the window.open() method with an empty string ("") for the URL, and the name of the existing window, a reference of the window is returned (without loading anything into the window). Take a look at the following link:

<A HREF="https://www.cnet.com/" TARGET="news">CNET</A>

When we invoke the following statement, we get a reference to the new window:

var latestNews = window.open("", "news");

Let's give it a try. Click the link CNET, and once it loads, click the following button:

The button actually retrieves a reference to the window named "news", and changes the URL of that window. Note that if you don't click the link before the button, a new, empty window is launched (because the specified window name doesn't exist). Also feel free to change the URL of the new window manually before you click the button. Bear in mind that the window keeps its name regardless of the document inside the window. Here's the HTML and JavaScript for the button:

<SCRIPT LANGUAGE="JavaScript">
<!--
function changeURL(winName, newURL) {
  win = window.open("", winName);
  win.location.href = newURL;
}
// -->
</SCRIPT>
<FORM>
<INPUT TYPE="button" VALUE="Load ZDNet"
onClick="changeURL('news', 'https://www.zdnet.com/')">
</FORM>

The preceding script shows you how to obtain a reference of an existing window. If you just want to change the URL of an existing window, you can also invoke the window.open() method directly with the URL of the desired page:

function changeURL(winName, newURL) {
  win = window.open(newURL, winName);
}

In the next section of the tutorial you'll find out how to customize the appearance of the new window.

Next: How to specify the features of a new window