Saturday, February 16, 2008

Opening and Closing a New Window With JavaScript

Syntax:

window.open('url to open','window name','attribute1,attribute2')

This is the function that allows you to open a new browser window for the viewer to use. Note that all the names and attributes are separated with a comma rather than spaces. Here is what all the stuff inside is:
  1. 'url to open' - This is the web address of the page you wish to appear in the new window.
  2. 'window name' - You can name your window whatever you like, in case you need to make a reference to the window later.
  3. 'attribute1,attribute2' - As with alot of other things, you have a choice of attributes you can adjust.
Window Attributes

Below is a list of the attributes you can use:
  1. width=300 - Use this to define the width of the new window.
  2. height=200 - Use this to define the height of the new window.
  3. resizable=yes or no - Use this to control whether or not you want the user to be able to resize the window.
  4. scrollbars=yes or no - This lets you decide whether or not to have scrollbars on the window.
  5. toolbar=yes or no - Whether or not the new window should have the browser navigation bar at the top (The back, foward, stop buttons..etc.).
  6. location=yes or no - Whether or not you wish to show the location box with the current url (The place to type http://address).
  7. directories=yes or no - Whether or not the window should show the extra buttons. (what's cool, personal buttons, etc...).
  8. status=yes or no - Whether or not to show the window status bar at the bottom of the window.
  9. menubar=yes or no - Whether or not to show the menus at the top of the window (File, Edit, etc...).
  10. copyhistory=yes or no - Whether or not to copy the old browser window's history list to the new window.
Set the Window Position

There is another set of options you can use to set the position of the new window on the viewers, but it only works with NS4+ and IE4+:
  1. screenX=number in pixels - Sets the position of the window in pixels from the left of the screen in Netscape 4+.
  2. screenY=number in pixels - Sets the position of the window in pixels from the top of the screen in Netscape 4+.
  3. left=number in pixels - Sets the position of the window in pixels from the left of the screen in IE 4+.
  4. top=number in pixels - Sets the position of the window in pixels from the top of the screen in IE 4+.
Example:

window.open('BuildingAdd.aspx?AccountID='+qsv1+'','','width=400,height=350,left=350,top=350,menubar=no,location=no,
toolbar=no,directories=no,scrollbars=no,status=no,copyhistory=no,resizable=no');


Closing a New Window

use the window.close() function in the HTML of the new window.
window.close()

No comments: