Creating New Windows in Javascript
= Index DOT Html by Brian Wilson =

Main Index | Element Index | Element Tree | HTML Support History
FAQ | Syntax | Wizard | What To Do With It | Non-standard features


FAQ: How To Open a New Window in Javascript?
One of the more common requests I see is how to open a new Javascript window with a certain feature/argument. The Window.open method has been available since Netscape 2.0 (Javascript 1.0), but additional window decoration features have been added to the syntax since then. The little code wizard below helps to create Javascript Window.open code for the features you specify. The features listed in the wizard have been valid since Javascript 1.0.

Syntax
window.open([URL], [Window Name], [Feature List], [Replace]);
where:
[URL] Optional. Specifies the URL of the new window. If no URL is given, the window opens with no page loaded.
[Window Name] Optional. Specifies a name for the window. This name can be used to reference the window as a destination for a hyperlink using the HTML TARGET attribute.
[Features] Optional. Comma separated strings specifying the features added to the new window. Typical values are booleans (TRUE/FALSE.) Syntax is of the form
    [feature] "=" [value] ("," [feature] "=" [value])*
[Replace] Optional. Boolean value specifying whether the new window replaces the current window in the browser's history.
Javascript Window.open Method Creation Wizard
[Note: Your browser needs to support Javascript/have it turned on for this to work. Also, some of the window.open features have no effect in Opera.]
Window Properties
Window URL:

 Window Name:
Window Features
  Width: 
 Height: 		 URL bar
Browser Toolbar
Menus
Directory Buttons		 Window Status Bar
Window Resize-able
Window Scroll-able
     
Code Result:
What to do with the code
Ok, now you have some javascript - what now? There are many ways the opening of a new window could be activated, and these are probably the most common:
  • Triggered at page load time
    <body onload="[open new window code];"> </body>
  • Triggered by clicking on a hyperlink:
    <a href="javascript:[open new window code]; void 0;">click me to open a new window!</a>
    (the "void 0;" is added to ensure that clicking on the link does not do anything other than opening the window.)
  • Triggered by clicking on a button
    <input type="button" value="click me to open a new window" onclick="[open new window code];" />


Non-standard Window.open Features
  IE4+
channelmode  Controls display of the channel bar.
left The x-position of the left side of the new window, from the left edge of the screen in pixels; used to position a new window.
top The y-position of the top side of the new window, from the top edge of the screen in pixels; used to position a new window.
fullscreen Controls whether the new window is displayed as fullscreen or not.
  IE5+
titlebar  Controls display of the window title bar. Only trusted dialogs and HTA's may use this.
  NN4+
alwaysLowered  New window floats below other windows, whether it is active or not. Only allowed by secure scripts.
alwaysRaised New window floats on top of other windows, whether it is active or not. Only allowed by secure scripts.
dependent The new window is a child of the current window. A dependent window closes when its parent window closes.
hotkeys New window created with most hotkeys disabled. Security and quit hotkeys remain enabled.
innerHeight The content area of the new window has the specified height. This is different from the 'height' feature which is the total window height.
innerWidth The content area of the new window has the specified width. This is different from the 'width' feature which is the total window width.
outerHeight The new window has a content and UI height with the specified height. This is the same as the 'height' feature.
outerWidth The new window has a content and UI width with the specified width. This is the same as the 'width' feature.
screenX The x-position of the left side of the new window, from the left edge of the screen in pixels; used to position a new window.
screenY The y-position of the left side of the new window, from the top edge of the screen in pixels; used to position a new window.
titlebar Controls display of the window title bar. Only allowed by secure scripts.
z-lock The new window does not open "above" other windows in the UI Z-order when activated. Only allowed by secure scripts.

Boring Copyright Stuff...