How to Open a Link in a New Window Using JavaScript

Learn how to customize the new window

Javascript
screenshot of w3schools.com

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.

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)

and customize each of the parameters.

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

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

URL Parameter

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.

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 whitespaces. 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.
    Format
    mla apa chicago
    Your Citation
    Kyrnin, Jennifer. "How to Open a Link in a New Window Using JavaScript." ThoughtCo, Jan. 14, 2018, thoughtco.com/open-link-new-window-javascript-3468859. Kyrnin, Jennifer. (2018, January 14). How to Open a Link in a New Window Using JavaScript. Retrieved from https://www.thoughtco.com/open-link-new-window-javascript-3468859 Kyrnin, Jennifer. "How to Open a Link in a New Window Using JavaScript." ThoughtCo. https://www.thoughtco.com/open-link-new-window-javascript-3468859 (accessed January 21, 2018).