Javascript new window
Opening new windows (pop-up windows) has a bad reputation because of all those annoying pop-up ads people get, but there are legitimate reasons for opening new windows. For example, if you link to a page in an another website you might want to open it in a new window or if you want to display extra information you might want to display it in a new window.
This lesson focuses on:
- The window.open() function
The window.open() function
The window.open() function is the function that is used to open new windows.
window.open() function arguments
URL
The URL of the page that will appear in the new window. Can be a relative URL or an absolute URL
Name
The name of the window.
Properties
The properties of the window such as width, height, whether the window should have a toolbar or not, and whether the window should have a menu bar or not.
Some properties of the window.open() function:
width
Sets the width of a new window in pixels
height
Sets the height of a new window in pixels
menubar
Sets whether or not the new window has a menu bar. Can take the value "yes", "no", "1", or "0"
titlebar
Sets whether or not the new window has a title bar. Can take the value "yes", "no", "1", or "0"
toolbar
Sets whether or not the new window has a tool bar. Can take the value "yes", "no", "1", or "0"
Syntax for the window.open() function:
window.open("URL", "Name", "Properties");
Example:
<html>
<head>
<title>Javascript New Window</title>
<script type="text/javascript">
<!--
function openNewWindow() {
/*
will open a new window with
the URL http://www.google.com
named "GoogleWindow" with a width of
380 pixels and a height of 250 pixels
*/
window.open("http://www.google.com/", "GoogleWindow", "width=380, height=250");
}
function openNewWindow2() {
/*
will open the page javascript-basics.php
in a new window with the name "Javascript basics"
with a width of 450 pixels and a height of 450 pixels
with a menu bar, title bar, and tool bar, and ability to resize it
*/
window.open("javascript-basics.php", "LycosWindow", "width=450, height=450, menubar=yes, titlebar=yes, toolbar=yes, resizable=yes");
}
//-->
</script>
</head>
<body>
<input type="button" onclick="openNewWindow()" value="Open a new window" />
<input type="button" onclick="openNewWindow2()" value="Open another new window" />
</body>
</html>
Output:
