Producing web pages
* HTML CSS DHTML XHTML A to Z of tags        Accessibility          Design

Displaying a page in a new window

This example describes how you can get a page to display in a new window when you click on a link.

You define the code you want to execute when the user clicks on the link. You associate the code with the onclick attribute. To display a page in a brand new window, use:

<a href="#" onClick="window.open
('posit.html', 'posit','width=400,height=200,
resize=no');">Blah</A>.

The HTML needs to be on a single line on the page or it won’t work.

This script opens a window (window.open) and displays the page posit.html. The next bit of the script assigns the name (posit) to the window, specifies the height and width of the window and stops the user from resizing the window. Note that all the names and attributes are separated with a comma rather than spaces.

There are other things you can do such as set the postion of the window, add scroll bars and so on. I don’t know what all the options are but here are some of them:

  • Set the width and height of the new window. For example, width="6002, height="200"
  • Specify whether or not you want the user to be able to resize the window. For example, resizable=yes (or no)
  • Specify whether or not to have scrollbars on the window. For example, scrollbars=yes (or no)
  • Specify whether or not the new window should have the browser navigation bar at the top (The back, foward, stop buttons etc.). For example, toolbar=yes (or no)
  • Specify whether or not you wish to show the location box with the current url (The place to type http://address). For example, location=yes (or no)
  • Specify whether or not the window should show the extra buttons. (what's cool, personal buttons, etc...). For example, directories=yes (or no)
  • Specify whether or not to show the window status bar at the bottom of the window. For example, status=yes (or no)
  • Specify whether or not to show the menus at the top of the window (File, Edit, etc...). For example, menubar=yes (or no)
  • Specify whether or not to copy the old window's history list to the new window. For example, copyhistory=yes (or no)

Some things to think about:

  • Once you come to the onClick=" ", don't leave any spaces between anything. Just use the commas and the quote marks. Any white space will keep it from working correctly in Netscape
  • Don't put quote marks around the yes, no, or numbers for the attributes. You only use single quotes around the entire set of attributes
  • In some browsers, you may need to use the number 1 instead of yes, and the number zero for nosection. The yes or no should work fine, though