How to open a new browser window from JavaScript

Last updated: October 3, 2022.

You can open a new browser window using JavaScript by calling the open method on the global window object.

To open a URL in a new window, simply pass in the URL to window.open as an argument in string format:

window.open('https://www.openjavascript.info')
// Opens a new instance of the OpenJavaScript homepage

The new window doesn't have to open a URL.

You can code the content of the new window yourself:

const newWindow = window.open(''); 

newWindow.document.write("This text is the content of the new page!");

Just like an ordinary window, you have full access to the DOM of a new window instance.

To access it, you must save a reference to the new window instance in a variable when creating it.

The document object is then accessible on it:

const newWindow = window.open(''); 

const title = newWindow.document.createElement('h1');
const content = newWindow.document.createElement('p');

title.textContent = "Hi, from a new window";
content.textContent = "You can still control me from the original window!";

newWindow.document.body.appendChild(title);
newWindow.document.body.appendChild(content);

As is the case with all methods on the window object, you can omit the reference to it when calling the open method:

open('https://www.openjavascript.info');
// Equivalent to window.open('https://www.openjavascript.info')

Optional second parameter: opening behaviour

You can change the opening behavior of the new window by adding an optional second parameter:

Parameter value	Opens new window in:
_blank	A new tab or browser window
_self	The same browser window (replaces current page)
_parent	The next frame up, if executed inside a nested frame
_top	The global browser window, ignoring any nested frame structure

For example, to open a new window instance that replaces the current window:

open("https://www.openjavascript.info", "_self"); 
// Opens URL in this window (replaces current window)

If no second argument is specified, the default behavior is _blank (window opens in new tab).

If you are happy with this behavior, you can use the second argument as an opportunity to enter a reference name for the new window:

const newWindow =  open("https://www.openjavascript.info", "OpenJavaScript"); 
// Opens URL in new window called "OpenJavaScript"

console.log(newWindow.name) 
// Returns: "OpenJavaScript"

Optional third parameter: dimension and screen placement

You can also specify the dimensions and placement of a new window on a user's screen.

For this, you can enter some of the following information in the third argument position in a comma-separated list:

Parameter value	Sets:
width=pixels	Width of new window
height=pixels	Height of new window
left=pixels	Spacing from the left-hand side of the screen
top=pixels	Spacing from the top of the screen

For example:

open("https://www.openjavascript.info", "", "width=500, height=500, left=30, top=20");

Closing a window

If you have opened a new window with window.open() and saved a reference to it, you can close it from the original window.

To do so, call the close() method on the reference to the newly opened window.

The following example includes a time delay so the new window is open for five seconds before it is closed:

const newWindow = open("https://www.openjavascript.info");

setTimeout( () => { newWindow.close() }, 5000); 
// triggers the close method to run after 5 seconds

---