Computers & ProgrammingFrontend DevelopmentJavaScript

Opening Windows and Popups with JavaScript

One of the more common uses of the Window object is to open new windows or pop-ups. While these pop-up 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 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 is used for most of the customization of the new window. More than one parameter can be passed by separating 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>

Leave a Comment

Your email address will not be published. Required fields are marked *

Scroll to Top