The open() method

The open() method allows you to open a new window with JavaScript.

window.open("URL" , "name" , "attribute1 = value,attribute2 = value");

The URL parameter is replaced with the actual URL of the HTML document that is to be opened
in the new window.

The name parameter is replaced with the name you give to the new window.
The third parameter is used to add attributes to the new window.
These attributes are set by using “yes”, “no”, or a numeric value on the right side of the equal sign.
There is a comma between each attribute and no space!

window.open("mypage.html" , "MyPage" , "width=400,height=300");

Standard attributes

The table below lists the standard attributes you can use as part of the last parameter in the open() method.

Attribute namePossible valuesFunction
widthnumberThe width of the new window in pixels.
heightnumberThe height of the new window in pixels.
directoriesyes, no, 1, 0Defines whether or not the new window has directory buttons (for example: What’s New or Link buttons near the top of the browser).
locationyes, no, 1, 0Defines whether or not the new window has a location box to type in a new URL.
mmenubaryes, no, 1, 0Defines whether or not the new window has a menu bar (File, Edit etc).
resizableyes, no, 1, 0Defines whether or not the viewer is allowed to resize the new window.
scrollbarsyes, no, 1, 0Defines whether or not the new window has scroll bars.
statusyes, no, 1, 0Defines whether or not the new window has a status bar at the bottom.
toolbaryes, no, 1, 0Defines whether or not the new window has a toolbar (Back and Forward buttons, Stop button etc).

Note:
You can use 1 instead of yes and 0 instead of no.

The following code opens a new window with all the features listed in the table above.

window.open("newpage.html","Amazing Page","width=300,height=300,directories=1,location=1,menubar=yes,resizable=1,scrollbars=yes,status=yes");

Of course, you have to create the newpage.html and place it in the same directory as the page containing the above script is.

Here is another example that opens the same newpage.html but this time when the viewer clicks a button.

<body>

<p>Click the link below to open a new page!</p>
<a href="newpage.html" id="new_window" >New Page</a>

<script type="text/javascript" >
var NewWindow = document.getElementById("new_window");
NewWindow.onclick = function () {
	window.open("newpage.html","Amazing Page","width=600,height=400,status=yes");
	return false;
}
</script>

</body>

Extended attributes

The extended attributes are listed in the table below. Note that they might not work in all browsers.

AttributePossible ValuesFunction
fullscreenyes, no, 1, 0Defines whether or not the window should open in a full screen.
leftnumberThe distance from the left of the screen.
personalbaryes, no, 1, 0Defines whether or not the new window has a personal toolbar.
screenXnumberThe distance from the left of the screen.
screenYnumberThe distance from the top of the screen.
topnumberThe distance from the top of the screen.

Leave a Reply