Published on: Monday 9th November 1998 By:
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.htm" target="anotherWindowName">Open new window</a>
<form action="testpage.htm" 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 mimicing the existing window. If the window already exists, then the contents will be changed instead.
The syntax of the open() method is fairly straight forward:
In addition to this, MSIE4 has a fourth parameter:
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.
If no URL is specified, a new window with about:blank will be displayed.
|directories||boolean||Controls the standard browser directory buttons|
|height||numeric||Specifies the height of the window in pixels|
|location||boolean||Controls the Location entry field|
|menubar||boolean||Controls the menu at the top of the window|
|resizable||boolean||Controls the ability to resize the window|
|scrollbars||boolean||Controls the horizontal and vertical scrollbars|
|status||boolean||Controls the status bar at the bottom of the window|
|toolbar||boolean||Controls the standard browser toolbar|
|width||numeric||Specifies the width of the window in pixels|
If you don't specify the width or 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 0 or 1 or yes or 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:
The fourth parameter is an optional boolean value, either true or false, which in MSIE4.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).
Which you can try out for yourself:
You may have noticed that its quite easy to lose pop-up windows - they can become hidden behind the main browser window. This happens when the main browser window regains focus, i.e., becomes the selected window. To avoid this you need to decide whether you want the pop-up window to have exclusive control of the browser, or whether you want it to be closed, or even brought to the front after a short delay.
By placing the following in the document loaded into the pop-up window then the pop-up will remain in front of the main browser window:
This has the side effect on some browsers of inhibiting the use of the main browser window until the pop-up window is closed. If you don't require this feature then you could always refocus the pop-up window after a delay:
Which ensures that the pop-up window regains the focus after a delay of one second - enough time to allow the user to interact with the main browser window.
Of course you may decide that if the user has moved the focus to the main browser window, that the pop-up window should be closed:
In NN4, the screenX and screenY attributes were introduced. In MSIE4 the top and left attributes were introduced. By combining the two both NN4 and MSIE4 will allow you to position the window. In earlier browsers the attributes and their values will be safely ignored:
To actually center the pop-up window requires the use of the window objects outerWidth and outerHeight properties in NN4 and the screen objects width and height properties in MSIE4. However, this results in the pop-up window being centered within the confines of the main browser window in NN4, and centered within the confines of the screen in MSIE4 - not the same thing, unless the main browser window is maximized.
Both NN4 and MSIE4 introduced new window features that can be set when opening up a new window:
|alwaysLowered||boolean||Creates a new window that floats below other windows, whether it is active or not.|
|alwaysRaised||boolean||Creates a new window that floats on top of other windows, whether it is active or not.|
|dependent||boolean||Creates a new window as a child of the current window, i.e., it closes when its parent window closes.|
|hotkeys||boolean||Enables or disables most hotkeys in new window that has no menu bar.|
|innerHeight||numeric||Specifies the height, in pixels, of the window's content area. Replaces height.|
|innerWidth||numeric||Specifies the width, in pixels, of the window's content area. Replaces width.|
|outerHeight||numeric||Specifies the vertical dimension, in pixels, of the outside boundary of the window.|
|screenX||numeric||Specifies the distance the new window is placed from the left side of the screen.|
|screenY||numeric||Specifies the distance the new window is placed from the top of the screen.|
|titlebar||boolean||Controls whether the windows has a title bar.|
|z-lock||boolean||Controls whether a window rises above other windows when activated.|
|fullscreen||boolean||Specifies whether to display the browser in a full-screen or normal window.|
|channelmode||boolean||Specifies whether to display the window in theater mode and show the channel band.|
In NN4, to create a window smaller than 100 pixels high by 100 pixels wide then signed scripts will be required, other features like setting a window as always lowered or offscreen also require signed scripts - this is to avoid a window that the user cannot see.
The windowHandle allows you to control the contents of the pop-up window; either to change the location of the pop-up window, to write HTML code into the window, or to interrogate the window properties.
The following shows how to alter the location of the pop-up window from blank.htm to testpage.htm:
There are potential problems with the code above. There are occasions where the window may not actually be opened before the change of location is attempted. It is best to change the above code to introduce a slight delay to give the browser a chance to actually open the window first. The following introduces a one second delay before the location is changed:
The following demonstrates how to write directly to the pop-up window using the windowHandle in conjunction with the documents write method. The first occasion that the window is written to will cause the existing contents to be replaced, other following document writes append information to the window.
With frames in a frameset its fairly straight forward to access the parent frame or the child frame, all you need to do is remember the object hierarchy. For example, the following frameset:
<frameset cols="50%,50%> <frame src="one.htm" name="left"> <frame src="two.htm" name="right"> </frameset>
Produces the following structure:
Parent Frame | +----+----+ | | one.htm two.htm
To access the parent frame from one.htm, use simply use: alert(parent.location.href), which will highlight the location of the parent frame, and similarily, to perform the reverse alert(window.one.location.href) will highlight the location of the left frame from the parent frame, and alert(parent.two.location.href) will highlight the location of the right frame from the left frame.
Once you've established this simple object syntax, you can use it to read and write almost any property of any other window within the frameset.
However, when you've opened a new window, the window does not form part of a frameset - therefore a new means of accessing the new window from the opener (i.e., the window that opens the new window) is required and vice versa.
Well, accessing the new window is straight forward enough, you just use the window name as shown in the previous example. Modern browsers also include a means of accessing the opener window. Funny enough, by providing an opener property, e.g., window.opener, which will reference the window, if any, that opened the current window. For example alert(window.opener.location.href) will highlight the location of the current window's opener.
Unfortunately, the opener property was not made available in older browsers - it was introduced in NN3 - but, we are able to create our own window properties/variables at any time:
Which checks to see whether the new window already has an opener property, and if not, creates one with a reference to the current window. This new window property can be used as if the browser supplied the opener property itself.
To round of this article, I've included a practical example of using pop-up windows. The form button, when pressed, opens up a date selector. Once a date has been selected the date is returned to the form on this page.
The date selector is described in detail in the article Popup Date Selector
This article has attempted to show you how to create new windows with properties and attributes that you can specify yourself. We have also seen how to write to these windows and how to access one window from another. Hopefully this will encourage you to make more use of the windows open() method.