How to Open a Link in a New Window Using JavaScript

Here's how to customize the new window

JavaScript is a useful way to open a link in a new window because you control how the window will look and where it will be placed on the screen by including specifications.

Close-Up Of Javascript On Computer Monitor
Degui Adil / EyeEm / Getty Images

Syntax for the JavaScript Window Open() Method

To open a URL in a new browser window, use the Javascript open() method as shown here:

window.open(URL, name, specs, replace)

URL Parameter

Beyond opening a window, you can also customize each of the parameters.

For example, the code below opens a new window and specifies its appearance using parameters.

Enter the URL of the page you want to open in the new window. If you don't specify a URL, a new blank window opens:

window.open("https://www.somewebsite.com", "_blank", "toolbar=yes,top=500,left=500,width=400,height=400");

Name Parameter

The name parameter sets the target for the URL. Opening the URL in a new window is the default and is indicated in this manner:

  • _blank. Opens a new window for the URL.

Other options you can use include:

  • _self. Replaces the current page with the URL.
  • _parent. Loads the URL into the parent frame.
  • _top. Replaces any framesets that are loaded.

Specs

The specs parameter is where you customize the new window by entering a comma-separated list with no white spaces. Choose from the following values.

  • height=pixels. This specification sets the height of the new window in pixels. The minimum value that can be entered is 100.
  • width=pixels. This sets the width of the new window in pixels. The minimum value is 100.
  • left=pixels. This spec sets the left position of the new window. No negative values can be entered.
  • top=pixels. This sets the top position of the new window. Negative values cannot be used.
  • menubar=yes|no|1|0. Use this spec to indicate whether or not to display the menu bar.
  • status=yes|no|1|0. This indicates whether or not to add a status bar.

Some specifications are browser-specific:

  • location=yes|no|1|0. This spec indicates whether or not to show the address field. For Opera browser only.
  • resizeable=yes|no|1|0. Determines whether or not the window can be resized. For use with IE only.
  • location=yes|no|1|0. Indicates whether or not to display scrollbars. Compatible with IE, Firefox, and Opera only.
  • toolbar=yes|no|1|0. Determines whether or not to show the browser toolbar. Compatible with IE and Firefox only.

Replace

This optional parameter has only one purpose — to specify whether the URL that opens in the new window replaces the current entry in the browser history list or appears as a new entry. 

  • When true, the URL replaces the current browser entry in the history list.
  • When false, the URL is listed as a new entry in the browser history list.