How to open a new browser window from JavaScript

OpenJavaScript 0

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 valueOpens 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"
Referencing a new window

Providing a reference name to the newly created window is not the same as setting its document title value in HTML. The reference name is only used for reference in JavaScript.

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 valueSets:
width=pixelsWidth 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