For most people, the main browser window is the only one they ever use or need. However, it is possible for another window to be opened up to allow you to either view another page while retaining the existing page in the main window, or to open up a remote window that can control or be controlled by the main browser window.
Another browser window can be simply opened using HTML and the
TARGET attribute, either in a link or on a form:
<A HREF="testpage.html" TARGET="anotherWindowName">Open new window</A>
<FORM ACTION="testpage.html" TARGET="anotherWindowName"> <input TYPE="SUBMIT" value="Open new window"> </FORM>
As long as the
TARGET attribute specifies a window name that is not already open, a new window will be created mimicking the existing window. If the window already exists, then the contents will be changed instead.
window.open() method, it is possible to control the look and feel of the new window, to have control over its contents, and also to be controlled by the new window.
Window open syntax
The syntax of the
open() method is fairly straight forward:
windowHandle = window.open([ URL [, windowName [, features]]])
In addition to this, IE4 has a fourth parameter:
windowHandle = window.open([URL [, windowName [, features [, replace]]]])
The result of the
open() method is returned and held in the variable to the left of the assignment operator (
=). This is a reference or handle to the newly opened window. It can be used to close the window, and to interrogate and alter the windows properties -- more on this later.
This is the relative or absolute URL of the file to be loaded into the pop-up window, for example:
If no URL is specified, a new window with
about:blank will be displayed.
This is the target name of the new window. So you could load another document into it with:
The third parameter can hold a large selection of name-value pairs:
||boolean||Controls the standard browser directory buttons|
||numeric||Specifies the height of the window in pixels|
||boolean||Controls the Location entry field|
||boolean||Controls the menu at the top of the window|
||boolean||Controls the ability to resize the window|
||boolean||Controls the horizontal and vertical scrollbars|
||boolean||Controls the status bar at the bottom of the window|
||boolean||Controls the standard browser toolbar|
||numeric||Specifies the width of the window in pixels|
If you don't specify the
height values, then Netscape browsers will mimic the size of the current window, if you don't specify any attributes then Netscape will mimic all the features of the current window:
Note all the name-value pairs must be separated by commas, but must not have spaces between them. For example, the following is incorrect:
Whereas the following, which does not have spaces, is correct:
The values for the boolean parameters may be
no. If a particular boolean parameter is not specified then its value defaults to
no. For example, to open a
window without directory buttons, location field, menubar, scrollbars, status or toolbar and not resizable use:
Again, if you don't specify the width and height then the page mimics the current window.
However, to create a window with all the window features you need to explicitly include them:
window.open('testpage.html','myExample5','width=200,height=200, directories=yes,location=yes,menubar=yes,scrollbars=yes, status=yes,toolbar=yes,resizable=yes');
The fourth parameter is an optional boolean value, either true or false, which in IE4.0+ replaces the current history entry with the new page being loaded (i.e., the last location in the browsers history object is overwritten by the new location).
Stringing it together
Which you can try out for yourself.