Categories:

Customizing the look of a window using JavaScript

On the previous page we saw the basic usage of window.open() with just one parameter- the URL of the page to open. However, this method actually supports 2 additional, optional parameters, with the last one being of most interest:

open("URL", "name", "attributes")

The "name" parameter lets you assign a target name to the newly opened window for links on your page to target. The 3rd parameter, "attributes", is where you control the look of the opened window with. Here are the possible values this parameter accepts:

Window attributes Description
channelmode Specifies if window should be opened in channel mode. IE only.
fullscreen Specifies if window should be opened in full screen mode. IE only.
height Specifies the height of the window.
left Specifies the x coordinates of the window in pixels. IE only. See "screenX" as well.
location Specifies if the location bar of the window should be included.
menubar Specifies if the menu bar of the window should be included.
resizable Specifies if window should be resizable.
screenX Specifies the x coordinates of the window in pixels. NS only. See "left" as well.
screenY Specifies the x coordinates of the window in pixels. NS only. See "top" as well.
scrollbars Specifies if window should contain scrollbars.
status Specifies if the status bar of the window should be included.
toolbar Specifies if the toolbar of the window (ie: reload button) should be included.
top Specifies the y coordinates of the window in pixels. IE only. See "screenY" as well.
width Specifies the width of the window.

Lets see how these attributes are passed in to affect the look of a pop up window:

<form>
<input type="button" value="Click here to see">
onclick="window.open('page2.htm', 'win1','width=300,height=200,menubar')"
</form>

Here is another example with no attributes turned on, except the size changed:

<form>
<input type="button" value="Click here to see">
onclick="window.open('page2.htm', 'win1','width=600,height=500,status')"
</form>

Both of the above windows are non resizable. This brings us to an important point. Consider the below:

<form>
<input type="button" value="Click here to see">
onclick="window.open('page2.htm', 'win1','width=600,height=500,status,resizable')"
</form>

This final example creates a popup window that is resizable, by including the "resizable" attribute within the value to pass in. The mere absence of an attribute value means it should be disabled, while the presence of it means the opposite. So merely by not including the values "resizable" or "status", this implies to JavaScript that these attributes of the window should be disabled. Also, note how you can chain multiple window attributes together, each separated with a comma.