Menu
Java Script window.open Method

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=pixelsThe left position of the window
top=pixelsThe top position of the window
width=pixelsThe width of the window
height=pixelsThe height of the window
resizable=yes|no|1|0Whether or not to make the window resizable
scrollbars=yes|no|1|0Whether or not to display scroll bars
titlebar=yes|no|1|0Whether or not to display the title bar
menubar=yes|no|1|0Whether or not to display the menu bar
location=yes|no|1|0Whether or not to display the address field
toolbar=yes|no|1|0Whether or not to display the browser toolbar
status=yes|no|1|0Whether 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:
• Rounding a Number with JavaScript
• Java Script Data Types
• Generating Random Numbers
• Java Script Math.sin Method
• JavaScript to Concatenate Strings
• JavaScript Character Escape Sequences
• The if/else Structure
• Use moveBy Method to Move Window by a Specific Offset
• Extract Part of a String
• Using the Java Script eval() Function