How to Open a Link in a New Window Using JavaScript

JavaScript offers 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.

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 Parameter

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 spec 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 spec sets the top position of the new window. Negative values cannot be used.
• menubar=yes|no|1|0: Use this spec to indicate whether to display the menu bar. Use either yes/no words or a 1/0 binary value.
• status=yes|no|1|0: This indicates whether or not to add a status bar. As with menubar, you're free to use words or binary values.

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 Parameter

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.