Window open() method

Definition and Usage

open() The method will open a new browser window or a new tab, depending on your browser settings and parameter values.

See also:

close() method

Example

Example 1

Open "www.codew3c.com" in a new browser tab:

window.open("https://www.codew3c.com");

Try It Yourself

More examples are provided below the page.

Syntax

window.open(url, name, features, replace)

Parameter

Parameter Description
url

Optional. The URL of the page to be opened.

If not specified urlA new blank window or tab will be opened.
name Optional. The target attribute or the name of the window.
features Optional. A comma-separated list of items without spaces.
replace

Deprecated.

Determines whether a new entry is created for the URL or the current entry in the history list is replaced.

The following values are supported:

  • true - The current document in the history list is replaced with the URL
  • false - A new entry is created in the history list for the URL

Warning:Chrome uses replace An exception will be thrown when the parameter is used.

The name parameter supports the following values:

Value Description
_blank The URL is loaded into a new window or tab. Default.
_parent The URL is loaded into the parent frame.
_self Replace the current page with a URL.
_top URL replaces any frameset that may be loaded.
name Window name (does not specify the window title).

The features parameter supports the following values:

Value Description
fullscreen=yes|no|1|0 Whether to display the browser in full-screen mode. The default is no. Full-screen mode windows must also be in cinema mode. Only for IE.
height=pixels Window height, in pixels. The minimum value is 100.
left=pixels The left position (X coordinate) of the window, in pixels. Negative values are not allowed.
location=yes|no|1|0 Whether to display the address field. Only for Opera.
menubar=yes|no|1|0 Whether to display the menu bar.
resizable=yes|no|1|0 Whether the window can be resized. Only for IE.
scrollbars=yes|no|1|0 Whether to display the scroll bar. Only for IE, Firefox, and Opera.
status=yes|no|1|0 Whether to add a status bar.
titlebar=yes|no|1|0 Whether to display the title bar. It will be ignored unless the application called is an HTML application or a trusted dialog.
toolbar=yes|no|1|0 Whether to display the browser toolbar. Only for IE and Firefox.
top=pixels The top position (Y coordinate) of the window, in pixels. Negative values are not allowed.
width=pixels Window width, in pixels. The minimum value is 100.

Return value

Returns a reference to the new window, or null if the call fails.

Technical details

Description

open() method will search for an existing window or open a new browser window. If name parameter specifies an existing window, then it returns a reference to that window. The returned window will display url parameter specifies the document, but ignores features parameter. In the case of knowing only the window name, this is the only way JavaScript can obtain a reference to that window.

If not specified name parameters, or if the specified window does not exist, then open() method will create a new browser window. This new window will display url The URL specified by the parameter, its name is name Size and controls are specified by features parameter specifies. url is an empty string, then open() will open a new window.

name parameters specify the name of the new window. This name can only contain numbers, letters, or underscores. It can be used as a marker <a> and <form> The value of the target attribute is used to force the document to be displayed in this specified window.

When using the method Window.open() When loading a new document into an existing specified window, it can be passed to it replace parameter, used to declare whether the new document has its own entry in the window's browsing history or replaces the current document's entry. If replace parameter is true, the new document will replace the old document. If the value is false, or omitted, then the new document will have its own entry in the window's browsing history. The function provided by this parameter is similar to Location.replace() method provided by the function. The

Please do not confuse Window.open() method is very similar to Document.open() method, to make your code clear, it is best to use Window.open(), and it is not recommended to use open(). In the event handler defined as an HTML attribute, the function open() is usually interpreted as Document.open()therefore, in this case, it is necessary to use Window.open().

Window features

features is a list of features to be displayed in the window, separated by commas. If this optional parameter is empty or omitted, the window will display all features. However, if features specifies a feature, then any features not listed in this string will not be displayed in the window. Note that this string does not contain any spaces or whitespace, and each element is formatted as shown below:

feature[=value]

For most features,value values are yes or no. The equal signs and value The values can be omitted, and if the feature is present, it is assumed its value The value is yes, and if it is not specified, it is assumed value The value is no. However, the width or height features value The value is required, and you must specify their pixel values.

Browser support

All browsers support open():

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
Supports Supports Supports Supports Supports Supports

More examples

Example 2

Open the about:blank page in a new window/tab:

var myWindow = window.open("", "", "width=200,height=100");

Try It Yourself

Example 3

Open a new window named "MsgWindow" and write some text into it:

var myWindow = window.open("", "MsgWindow", "width=200,height=100");
myWindow.document.write("<p>This is 'MsgWindow'. I am 200px wide and 100px tall!</p>");

Try It Yourself

Example 4

Replace the current window with a new one:

var myWindow = window.open("", "_self");
myWindow.document.write("<p>I replaced the current window.</p>");

Try It Yourself

Example 5

Open a new window and control its appearance:

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

Try It Yourself

Example 6

Open multiple tabs:

window.open("http://www.google.com/");
window.open("https://www.codew3c.com/");

Try It Yourself

Example 7

Open a new window. Then use the close() method to close this new window:

function openWin() {
  myWindow = window.open("", "myWindow", "width=200,height=100");   // Open a new window
}
function closeWin() {
  myWindow.close();   // Close this new window
}

Try It Yourself

Example 8

Open a new window. Use the name property to return the name of the new window:

var myWindow = window.open("", "MsgWindow", "width=200,height=100");
myWindow.document.write("<p>This window's name is: " + myWindow.name + "</p>");

Try It Yourself

Example 9

Use the opener property to return a reference to the window that creates the new window:

var myWindow = window.open("", "myWindow", "width=200,height=100");   // Open a new window
myWindow.document.write("<p>This is 'myWindow'</p>");   // Text in the new window
myWindow.opener.document.write("<p>This is the source window!</p>");  // Create text in the window that creates the new window

Try It Yourself