The JavaScript Diaries: Part 8/Page 4

[previous] [next]

The JavaScript Diaries: Part 8

By 

Here is a function and the corresponding link for creating popup windows for different links. There are other ways to do this also, using the DOM (Document Object Model). We'll look at those when we get to that part of our study. You can try this script out using the link here: JavaScript Demo

Place this in an external file (or head section).

var bookWindow;
function newWindow(link) {
	bookWindow = window.open(link, "new1", "width=240,height=360");
  if (bookWindow.open) {
    bookWindow.close;
  }
  bookWindow.focus();
}

Place this in the body of the document.

<a href="demo.html" onclick="newWindow('demo.html'); return false;">JavaScript Demo</a>

Let's take a look at what's happening here:

To begin, we declared a variable called bookWindow. As we did before, this is done so when we refer to it in the link, it has already been declared and we won't receive an error message. Next, we created a function called newWindow and gave it a parameter called link. Then we initialized the variable bookWindow with an open() method. We gave the open() method several parameters: We told it to open the Web page assigned to the link parameter We gave the window a name of new1 (so we can use it to open and close the window), and We set the width of the new window at 240 pixels and its height at 360 pixels. The size can be set to anything you need it to be. If the page is longer than the window, be sure to add the scrollbars attribute. Be sure that all the parameters (i.e., width, height) are separated by a comma without any spaces between the comma and the next parameter. You could add any of the attributes we listed above. Next, we said if the window is already open, close it. This will stop additional windows from popping up. Then, we gave the new window the focus, which means we brought it to the foreground, in front of any other open windows. In our link we used the HTML href element, just as we would with a regular link. This makes sure the link works if JavaScript is turned off in the browser. It will function just like a regular link. With JavaScript turned on, the window.open() method is used. The return false value keeps the href element from activating and opening a second window when one is opened using JavaScript.

One thing to remember is that some popup blockers block all popup windows, regardless of how they are opened.

Note: My intention here is to show how the window.open() method works. I will be covering creating popup windows in greater detail in a later installment.

close()

This method is used for closing windows. It can be used in conjunction with the onClick event handler to close a window, using the script below:

<form>
<input type="button" value="Close window" onClick="window.close();"><br>
</form>

For security reasons, this method only works with windows that have been opened by you with JavaScript.
[previous] [next]

Created: August 19, 2005

URL: