To create and open a new window, use the window.open method. The code shown below causes a new blank window to open as the webpage loads.
<html> <head> </head> <body> <script type="text/javascript"> window.open(); </script> </body> </html>
The code shown below causes a new window to open and display a specific document.
<html>
<head>
</head>
<body>
<script type="text/javascript">
window.open("path/filename.ext");
</script>
</body>
</html>
In the code shown below, the window.open method is placed inside a function which is placed in a Java Script code block in the head section of the webpage. When the user clicks on a link in the webpage, the function is executed and the new window is opened. The function also writes the text "HELLO" to the new window and sets its title bar text to "HELLO". You need to call the window.stop method to close the new window for writing.
<html>
<head>
<script type="text/javascript">
function open_window()
{
var myWin = window.open();
myWin.document.write("HELLO");
myWin.document.title = "HELLO";
myWin.stop();
}
</script>
</head>
<body>
<a href="#" onclick="open_window()">
Open Window</a>
</body>
</html>
The complete syntax for the window.open method is shown below.
window.open(URL, name, features, replace);
URL specifies the URL or file name of the page to open. If no URL or file name is specified, a new window with the title Blank Page will be opened.
name specifies the name or target of the window. A target attribute can be one of the following values:
_blank URL is loaded into a new window
_parent URL is loaded into the parent frame
_self URL replaces the current page
_top URL replaces any framesets that may be loaded
features is a comma-separated list of windows features. The following features are supported:
| left=pixels | The left position of the window |
| top=pixels | The top position of the window |
| width=pixels | The width of the window |
| height=pixels | The height of the window |
| resizable=yes|no|1|0 | Whether or not to make the window resizable |
| scrollbars=yes|no|1|0 | Whether or not to display scroll bars |
| titlebar=yes|no|1|0 | Whether or not to display the title bar |
| menubar=yes|no|1|0 | Whether or not to display the menu bar |
| location=yes|no|1|0 | Whether or not to display the address field |
| toolbar=yes|no|1|0 | Whether or not to display the browser toolbar |
| status=yes|no|1|0 | Whether or not to add a status bar |
replace specifies whether the URL replaces the current entry in the history list or if it creates a new entry in the history list. true URL replaces the current entry in the history list. false URL creates a new entry in the history list.
The code shown below uses the features parameter to set some features of the window.
<html>
<head>
<script type="text/javascript">
function open_window()
{
var myWin = window.open("", "_blank",
"left=100, top=100, width=256, height=256,
menubar=1, location=1, toolbar=0");
myWin.document.write("HELLO");
myWin.document.title = "HELLO";
myWin.stop();
myWin.focus();
}
</script>
</head>
<body>
<a href="#" onclick="open_window()">
Open Window</a>
</body>
</html>
Note that, if you're going to write to the new window, it's good practice to use the window.stop method to to close the new window for writing, and whether you write to the new window or load a document into the new window, it's good practice to use the window.focus method to make sure the new window doesn't end up covered by existing windows.
The code shown below places the window object in a global variable and places the window's features list in a local variable that is used as a parameter in the window.open method. A second link on the webpage calls a function that uses the new window's global variable with the window.close method to close the window.
<html>
<head>
<script type="text/javascript">
var myWin;
function open_window()
{
var features = "left=100, top=100,
width=256, height=256, scrollbars=1";
myWin = window.open("open.txt", "_blank",
features);
myWin.focus();
}
function close_window()
{
myWin.close();
}
</script>
</head>
<body>
<a href="#" onclick="open_window()">
Open Window</a><br />
<a href="#" onclick="close_window()">
Close Window</a>
</body>
</html>
At the beginning of this article, I used in-line Java Script to open a new window. The more proper method would have been to use the onload method of webpage's body tag, as shown below.
<body onLoad="open_window()">
And if you do that, and you don't want to leave the new window staggling after you close the parent window, use the onUnload method of webpage's body tag to close the new window, as shown below.
<body onLoad="open_window() onUnload="close_window()">
As you've learned in this article, opening a new window with JavaScript is not difficult.
More Java Script Code:
• Java Script confirm Message Box
• Java Script Strings
• JavaScript Character Escape Sequences
• Generating Random Numbers
• The Conditional Operator
• Find a Character or a Substring Within a String
• The do/while Loop
• How to Use a JavaScript try-catch Block to Debug
• Access Web Page Elements With getElementById
• The if/else Structure