Opening Linked Windows with JavaScript

Pop-up windows are used all over the Web. They are often used to display advertisements, but they can be used for all sorts of other things as well, such as creating a separate window to show help text in an application, or to display a larger version of a graph that's embedded in a document. You've seen how you can use the target attribute to open a link in a new window, but that approach isn't very flexible. You can't control the size of the window being displayed, nor which browser interface controls are displayed.

Fortunately, with JavaScript you can take more control of the process of creating new windows. You've already learned that one of the objects supported by JavaScript is window. It refers to the window that's executing the script. To open a new window, you use the open method of the window object. Here's a JavaScript function that opens a window:

function popup(url) {   mywindow = window.open(url, 'name', 'height=200,width=400');   return false; }

The function accepts the URL for the document to be displayed in the new window as an argument. It creates a new window using the window.open function, and assigns that new window to a variable named mywindow. (I'll explain why we assign the new window to a variable in a bit.)

The three arguments to the function are the URL to be displayed in the window, the name for the window, and a list of settings for the window. In this case, I indicate that I want the window to be 400 pixels wide and 200 pixels tall. The name is important because if other links target a window with the same name, either via the window.open() function or the target attribute, they'll appear in that window.

At the end of the function, I return false. That's necessary so that the event handler used to call the function is stopped. To illustrate what I mean, it's necessary to explain how this function is called. Rather than using the target attribute in the <a> tag, the onclick handler is utilized, as follows:

<a href="whatever.html" onclick="popup('whatever.html')">Pop up</a>

Ordinarily, when a user clicks on the link, the browser will call the function and then go right back to whatever it was doing before, navigating to the document specified in the HRef attribute. Returning false in the popup() function tells the browser not to continue what it was doing, so the new window is opened by the function, and the browser doesn't follow the link. If a user who had JavaScript turned off visited the page, she would follow the link directly to whatever.html because the onclick attribute would be ignored.

In the preceding example, I specified the height and width settings for the new window. There are several more options available as well, which are listed in Table 14.4.

Table 14.4. Settings for Pop-up Windows

Setting	Purpose
height	Height of the window in pixels.
width	Width of the window in pixels.
resizable	Enable window resizing.
scrollbars	Display scroll bars.
status	Display the browser status bar.
toolbar	Display the browser toolbar.
directories	Display the browser's directory buttons.
location	Display the browser's location bar.
menubar	Display the browser's menu bar. (Not applicable on Mac OS X.)
left	Left coordinate of the new window onscreen (in pixels).
top	Top coordinate of the new window onscreen (in pixels).

When you specify the settings for a window, you must include them in a commaseparated list, with no spaces anywhere. For the settings that allow you to enable or disable a browser interface component, the valid values are on or off. Here's a valid list of settings:

status=off,toolbar=off,location=off,left=200,top=100,width=300,height=300

Here's an invalid list of settings:

status=off, toolbar=off, location=false, top=100

Including spaces (or carriage returns) anywhere in your list will cause problems. It's also worth noting that when you provide settings for a new window, the browser automatically assumes a default of off for any on/off settings that you don't include. So you can leave out anything you want to turn off.

Here's a complete example that uses JavaScript to create a new window:

<html>     <head>         <meta http-equiv="Content-type" content="text/html; charset=utf-8" />         <title>Popup example</title>         <script type="text/javascript" language="javascript">         function popup(url) {           mywindow = window.open(url, 'name', 'height=200,width=400');           return false;         }         </script>     </head>     <body>         <h1>Popup Example</h1>         <p><a href="popup.html" onclick="popup('popup.html')">Launch              popup</a></p>     </body> </html>

When a user clicks on the "Launch popup" link, a new 200 by 400 pixel window appears with the contents of popup.html.