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 tutorial focuses on:
- The window.open() function
The window.open() function
The window.open() function 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"
- Some properties of the window.open() function:
Syntax:
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 "JavascriptBasics"
with a width of 650 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", "JavascriptBasics", "width=650, 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: