Did you find this useful?
Socialize it today.


JavaScript Open Windows and Popups

Sunday, May 06, 2012

One of the more common uses of the Window object is to open new windows, or popups. While these popup windows are quite annoying to users when you use them for advertising, they are quite useful when you integrate them into a web application for an appropriate use. Here is the syntax used to open a new window. We can use the Window.open method for opening new windows.


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


All of the parameters that you pass in the open method are optional. If no parameters are passed, the browser opens a new about:blank window.


URL

The URL of the page to open in the new window. This parameter is optional.


Name

This parameter either specifies the target attribute or the name of the window. This parameter is optional. The following values are supported:

  • _blank - URL is loaded into a new window. Default value
  • _parent - URL is loaded into the parent window
  • _self - URL replaces the current window
  • _top - URL replaces any framesets that may be loaded
  • name - The name of the window

Features

This set of parameters are used for most of the customization of the new window. More than one parameter can be passed by seperating the list of values with a comma. This parameter is optional.


ParameterDescription
channelmode=yes|no|1|0Whether or not to display the window in theater mode. Default is no. IE only
directories=yes|no|1|0Whether or not to add directory buttons. Default is yes. IE only
fullscreen=yes|no|1|0Whether or not to display the browser in full-screen mode. Default is no. Must be in theater mode.
height=pixelsThe height of the window. Minimum value is 100px
left=pixelsThe left position of the window
location=yes|no|1|0Whether or not to display the address field. Default is yes
menubar=yes|no|1|0Whether or not to display the menu bar. Default is yes
resizable=yes|no|1|0Whether or not the window is resizable. Default is yes
scrollbars=yes|no|1|0Whether or not to display scroll bars. Default is yes
status=yes|no|1|0Whether or not to add a status bar. Default is yes
titlebar=yes|no|1|0Whether or not to display the title bar. Default is yes
toolbar=yes|no|1|0Whether or not to display the browser toolbar. Default is yes
top=pixelsThe top position of the window. IE only
width=pixelsThe width of the window. Minimum value is 100px


History

Specifies whether the URL creates a new entry or replaces the current entry in the history list. This parameter is optional. The following values are supported: true and false. With True, the URL replaces the current document in the history list. With false, the URL creates a new entry in the history list.


Example

Here is an example that can be used to open a small popup window.


<html>
<head>
<script type="text/javascript">
  function openWindow() {
    myWin = window.open('', '', 'width=400,height=300');
    myWin.document.write("Hello!");
  }
</script>
</head>
<body>

<input type="button" value="Open Window!" 
    onclick="openWindow()" />

</body>
</html>





Please help us spread the word by socializing it today!

email contact us

Did you find something wrong with the information on this page? Please take a moment to report it to us so that we can continue to improve the quality of the information on this site. Click here to report an issue with this page.



Recommended Books & Training Resources

HTML CSS and JavaScript Editor JavaScript and jQuery: The Missing Manual Professional JavaScript for Web Developers