Javascript Reference - Window open() Method








The open() method opens a new browser window.

The window.open() method can navigate to a particular URL and open a new browser window.

This method accepts four arguments:

  • URL to load,
  • window target,
  • a string of features,
  • a Boolean value to tell whether to take the place of the currently loaded page in the browser history.

If the second argument is the name of an existing window or frame, then the URL is loaded into the window or frame with that name.

//same as <a href="http://www.java2s.com" target="topFrame"></a> 
window.open("http://www.java2s.com/", "topFrame");

The second argument may be any of the special window names:

  • _self
  • _parent
  • _top
  • _blank.

The third argument is a comma-delimited string indicating display information for the new window. The following table describes the various options.

SettingValueDescription
fullscreen"yes"or "no"Whether to use full to show the content. Internet Explorer only.
heightNumberThe height of the new window. This cannot be less than 100.
leftNumberThe left coordinate of the new window. This cannot be a negative number.
location"yes"or "no"Whether to display the location bar.
menubar"yes"or "no"Whether to show the menu bar. The default is "no".
resizable"yes"or "no"Is the new window going to resizable. The default is "no".
scrollbars"yes"or "no"If the new window can scroll. The default is "no".
status"yes"or "no"If the new window can have status bar.
toolbar"yes"or "no"If the window can have the toolbar. The default is "no".
topNumberThe top coordinate of the new window. This cannot be a negative number.
widthNumberThe width of the new window. This cannot be less than 100.

Any or all of these settings may be specified as a comma-delimited set of name-value pairs. The name-value pairs are indicated by an equal sign. No white space is allowed in the feature string.

window.open("http://www.java2s.com/",
            "java2sWindow",
            "height=400,width=400,top=10,left=10,resizable=yes");

The window.open() method returns a reference to the newly created window. This object can be used to manipulate the newly opened window:

var java2sWin =window.open("http://www.java2s.com/","myWindow"); 
java2sWin.resizeTo(500, 500); 
java2sWin.moveTo(100, 100);

It's possible to close the newly opened window by calling the close() method as follows:

java2sWin.close();

This method works only for pop-up windows created by window.open().

The newly created window object has a reference back to the window that opened it via the opener property. For example:

var java2sWin =window.open("http://www.java2s.com/","java2sWindow"); 
document.writeln(java2sWin.opener == window); //true




Browser Support

open Yes Yes Yes Yes Yes

Syntax

window.open(URL,name,specs,replace)
Parameter Description
URL Optional. Set the URL to open.
If no URL is provided, a new window with about:blank is opened
name Optional. Set the target attribute or the name of the window. The following values are supported:
  • _blank - URL is loaded into a new window. This is default
  • _parent - URL is loaded into the parent frame
  • _self - URL replaces the current page
  • _top - URL replaces any framesets that may be loaded
  • name - The name of the window
specs Optional. A comma-separated list of items. The following values are supported:

height=pixels The height of the window. Min. value is 100
left=pixels The left position of the window. Negative values not allowed
menubar=yes|no|1|0 Whether or not to display the menu bar
status=yes|no|1|0 Whether or not to add a status bar
titlebar=yes|no|1|0 Whether or not to display the title bar.
toolbar=yes|no|1|0 Whether or not to display the browser toolbar. IE and Firefox only
top=pixels The top position of the window. Negative values not allowed
width=pixels The width of the window. Min. value is 100

replace Optional. Set whether the URL creates a new entry or replaces the current entry in the history list. The following values are supported:
  • true - URL replaces the current document in the history list
  • false - URL creates a new entry in the history list




Return Value

The reference to the new window.

Example

The following code shows how to Open "www.example.com" in a new browser window.


<!DOCTYPE html>
<html>
<body>
<button onclick="myFunction()">test</button>
<!-- w  w w.j  a  v  a  2 s  . c  o  m-->
<script>
function myFunction() {
    window.open("http://www.example.com");
}
</script>

</body>
</html>

The code above is rendered as follows:

Pop-up Blockers

You can tell if a pop-up was blocked by checking the return value: When a browser add-on or other program blocks a pop-up, window.open() typically throws an error.

<!DOCTYPE HTML> 
<html> 
<body> 
<script type="text/javascript"> 
    var blocked = false; 
    try { <!--from   ww w .j a  va 2 s .  c  o  m-->
        var myWin = window.open("http://www.java2s.com", "_blank"); 
        if (myWin == null){ 
            blocked = true; 
        } 
    } catch (ex){ 
        blocked = true; 
    } 
    if (blocked){ 
        document.writeln("The popup was blocked!"); 
    } 

</script> 
</body> 
</html>

Click to view the demo