Using the window.open method

The syntax of the window.open method is given below:

open (URL, windowName[, windowFeatures])

URL
The URL of the page to open in the new window. This argument could be blank.

windowName
A name to be given to the new window. The name can be used to refer this window again.

windowFeatures
A string that determines the various window features to be included in the popup window (like status bar, address bar etc)

The following code opens a new browser window with standard features.

window.open ("http://www.javascript-coder.com","mywindow");

Note: The popups created using 'window.open()' can get blocked by popup blockers.
Click here to find out how to create popups that does not get blocked.

Changing the features of the Popup

You can control the features of the popup using the last argument to the window.open method. The following code opens a window with a status bar and no extra features.
window.open ("http://www.javascript-coder.com","mywindow","status=1");

The code below opens a window with toolbar and status bar.
window.open ("http://www.javascript-coder.com", "mywindow","status=1,toolbar=1");

The table shows the features and the string tokens you can use:

status	The status bar at the bottom of the window.
toolbar	The standard browser toolbar, with buttons such as Back and Forward.
location	The Location entry field where you enter the URL.
menubar	The menu bar of the window
directories	The standard browser directory buttons, such as What's New and What's Cool
resizable	Allow/Disallow the user to resize the window.
scrollbars	Enable the scrollbars if the document is bigger than the window
height	Specifies the height of the window in pixels. (example: height='350')
width	Specifies the width of the window in pixels.

Examples
The following code opens a window with menu bar. The window is resizable and is having 350 pixels width and 250 pixels height.
window.open ("http://www.javascript-coder.com", "mywindow","menubar=1,resizable=1,width=350,height=250");
Example 1

A window with location bar, status bar, scroll bar and of size 100 X 100
window.open ("http://www.javascript-coder.com", "mywindow","location=1,status=1,scrollbars=1, width=100,height=100");
Example 2

Moving the window to a desired location

You can use the window.moveTo function to move the popup window to a desired location.
The code below shows positioning the popup at a desired location

function mypopup() { mywindow = window.open ("http://www.javascript-coder.com", "mywindow","location=1,status=1,scrollbars=1, width=100,height=100"); mywindow.moveTo(0,0); }
The code positions the popup on the top left corner of the screen.

Putting it all together

Now we will combine all these information to create the popup windows of different types.
The Code below opens a popup window when you enter the page:

<html> <head> <title>JavaScript Popup Example 3</title> </head><SCRIPT language="JavaScript1.2"> function poponload() { testwindow= window.open ("", "mywindow", "location=1,status=1,scrollbars=1,width=100,height=100"); testwindow.moveTo(0,0); } </SCRIPT><body onload="javascript: poponload()"><H1>JavaScript Popup Example 3</H1> </body> </html>

Notice that the URL is kept blank. This will open a blank window. You can see the code in work in this file:
JavaScript Popup Example 3

Popup On Exit

The following code pops up a window when the user exits a page.

<html> <head> <title>JavaScript Popup Example 3</title> </head><SCRIPT language="JavaScript1.2"> function exitpop() { my_window= window.open ("", "mywindow1","status=1,width=350,height=150"); my_window.document.write('<H1>Popup Test!</H1>'); } </SCRIPT><body onunload="javascript: exitpop()" > <H1>JavaScript Popup Example 4</H1> </body> </html>

The code contains an extra line:
my_window.document.write('<H1>Popup Test!</H1>')
This code displays a line 'Popup Test!' in the popup.

------------------------------------------------------------------------------------------------------------

To open a new window, you will need to use yet another ready-made JavaScript function. Here is what it looks like:

window.open('url to open','window name','attribute1,attribute2')

This is the function that allows you to open a new browser window for the viewer to use. Note that all the names and attributes are separated with a comma rather than spaces. Here is what all the stuff inside is:

'url to open'
This is the web address of the page you wish to appear in the new window.
'window name'
You can name your window whatever you like, in case you need to make a reference to the window later.
'attribute1,attribute2'
As with alot of other things, you have a choice of attributes you can adjust.

Window Attributes

Below is a list of the attributes you can use:

width=300
Use this to define the width of the new window.
height=200
Use this to define the height of the new window.
resizable=yes or no
Use this to control whether or not you want the user to be able to resize the window.
scrollbars=yes or no
This lets you decide whether or not to have scrollbars on the window.
toolbar=yes or no
Whether or not the new window should have the browser navigation bar at the top (The back, foward, stop buttons..etc.).
location=yes or no
Whether or not you wish to show the location box with the current url (The place to type http://address).
directories=yes or no
Whether or not the window should show the extra buttons. (what's cool, personal buttons, etc...).
status=yes or no
Whether or not to show the window status bar at the bottom of the window.
menubar=yes or no
Whether or not to show the menus at the top of the window (File, Edit, etc...).
copyhistory=yes or no
Whether or not to copy the old browser window's history list to the new window.

All right, here's an example code for opening a new window:

Test it out below:

Yes, you got a 400 by 200 window with some writing in it!

Some Important Rules

Before we move on, we need to make note of some things so you won't go insane like I did trying to get this to work right!

When you get to the INPUT tag, keep everything in that tag on one single line in your text editor, including the javascript commands. (The text goes to the next line on this page so you can print it out easily).
Once you come to the onClick=" ", don't leave any spaces between anything. Just use the commas and the quote marks. Any white space will keep it from working correctly in Netscape.
Don't put quote marks around the yes, no, or numbers for the attributes. You only use single quotes around the entire set of attributes.
In some browsers, you may need to substitute the number 1 for yes, and the number zero for no in the attributes section. The yes or no should work fine, though.

A New Browser Window

Okay, enough rules. Let's look at the code that makes a completely new browser! Basically, you just use yes for all of the attributes. Here is the code:

Give it a try, this window has all the features!

Remember, keep everything on one line....one really, really long line! I just put the sample code on new lines so you wouldn't have to scroll forever to read everything........and your printer won't go crazy now either!

Closing a New Window

Hmm.....what's with the "Close Window" button you saw in the new window? How does one do do that? To use that trick, use the window.close() function in the HTML of the new window. Just put this code wherever you want the close button to show up in the new window:

Of course, the window can be closed with the "x" symbol on the top-right of the window as well.

Set the Window Position

There is another set of options you can use to set the position of the new window on the viewers, but it only works with NS4+ and IE4+:

screenX=number in pixels
Sets the position of the window in pixels from the left of the screen in Netscape 4+.
screenY=number in pixels
Sets the position of the window in pixels from the top of the screen in Netscape 4+.
left=number in pixels
Sets the position of the window in pixels from the left of the screen in IE 4+.
top=number in pixels
Sets the position of the window in pixels from the top of the screen in IE 4+.

Great, but how do you decide which commands to use if there are different ones for each browser? In this case, you can use both sets of commands- the browser will ignore the set it does not recognize. The example below will give you a new window 0 pixels from the left and 100 pixels from the top of your screen:

Now, that is a lot of work- but you can now customize a new window for your viewers!

Well, that's all for now.....The next section is: Using Link Tags for JavaScripts.

MSDN open Method
...............................................................................................................................................................................................................................................................................

from MSDN : http://msdn.microsoft.com/en-us/library/ms536651.aspx

open Method

Opens a new window and loads the document specified by a given URL.

Syntax

oNewWindow = object.open( [sURL] [, sName] [, sFeatures] [, bReplace])

Parameters

sURL Optional. String that specifies the URL of the document to display. If no URL is specified, a new window with about:blank is displayed.

sName Optional. String that specifies the name of the window. This name is used as the value for the TARGET attribute on a form or an anchor element.

_blankThe sURL is loaded into a new, unnamed window.

_mediaThe url is loaded in the Media Bar in Microsoft Internet Explorer 6. Microsoft Windows XP Service Pack 2 (SP2) and later. This feature is no longer supported. By default the url is loaded into a new browser window or tab.

_parentThe sURL is loaded into the current frame's parent. If the frame has no parent, this value acts as the value _self.

_searchDisabled in Windows Internet Explorer 7, see Security and Compatibility in Internet Explorer 7 for details. Otherwise, the sURL is opened in the browser's search pane in Internet Explorer 5 or later.

_selfThe current document is replaced with the specified sURL .

_topsURL replaces any framesets that may be loaded. If there are no framesets defined, this value acts as the value _self.

sFeatures Optional. String that contains a list of items separated by commas. Each item consists of an option and a value, separated by an equals sign (for example, "fullscreen=yes, toolbar=yes"). The following features are supported.

channelmode = { yes | no | 1 | 0 }Specifies whether to display the window in theater mode. The default is no. Internet Explorer 7. channelmode = { yes | 1 } overrides height, width, top, and left values. When active, the Navigation Bar is hidden and the Title Bar is visible. The Channel Band is no longer supported in Internet Explorer 7. Prior to Internet Explorer 7 channelmode = { yes | 1 } displays the Channel Band in theatre mode.

directories = { yes | no | 1 | 0 }Specifies whether to add directory buttons. The default is yes. Internet Explorer 7. This feature is no longer supported.

fullscreen = { yes | no | 1 | 0 }Specifies whether to display the browser in full-screen mode. The default is no. Use full-screen mode carefully. Because this mode hides the browser's title bar and menus, you should always provide a button or other visual clue to help the user close the window. ALT+F4 closes the new window. Internet Explorer 7. A window in full-screen mode does not need to be in theatre mode. Prior to Internet Explorer 7 a window in full-screen mode must also be in theater mode (channelmode).

height = numberInternet Explorer 7. Sets the height of the window in pixels. The minimum value is 150, and specifies the minimum height of the browser content area. Prior to Internet Explorer 7 the minimum height value is 100.

left = numberSpecifies the left position, in pixels. This value is relative to the upper-left corner of the screen. The value must be greater than or equal to 0.

location = { yes | no | 1 | 0 }Internet Explorer 7. Specifies whether to display the navigation bar. The default is yes. Prior to Internet Explorer 7 this feature specifies whether to display the address bar. The Back, Forward, and Stop commands are now located in the Navigation bar. Prior to Internet Explorer 7 navigation commands were located in the toolbar.

menubar = { yes | no | 1 | 0 } Specifies whether to display the menu bar. The default is yes. Internet Explorer 7. By default the menu bar is hidden unless revealed by the ALT key. menubar = { no | 0 } prohibits the menubar from appearing even when the Alt key is pressed. The combination of menubar = { no | 0 } and toolbar = { no | 0 } hides the toolbar and disables any additional third-party user interfaces.

resizable = { yes | no | 1 | 0 }Specifies whether to display resize handles at the corners of the window. The default is yes. Internet Explorer 7. resizable = { no | 0 } disables tabs in a new window.

scrollbars = { yes | no | 1 | 0 }Specifies whether to display horizontal and vertical scroll bars. The default is yes.

status = { yes | no | 1 | 0 }Specifies whether to add a Status Bar at the bottom of the window. The default is yes.

titlebar = { yes | no | 1 | 0 }Specifies whether to display a Title Bar for the window. The default is yes. Internet Explorer 5.5 and later. This feature is no longer supported. The Title Bar remains visible unless the fullscreen sFeature is active. This parameter is ignored prior to Internet Explorer 5.5. It applies only if the calling application is an HTML Application or a trusted dialog box.

toolbar = { yes | no | 1 | 0 }Internet Explorer 7. Specifies whether to display the browser command bar, making buttons such as Favorites Center, Add to Favorites, and Tools available. The default is yes. The combination of menubar = { no | 0 } and toolbar = { no | 0 } turn off the Toolbar and any additional third-party user interfaces. Prior to Internet Explorer 7 the toolbar sFeature specifies whether to display the browser toolbar, making buttons such as Back, Forward, and Stop available.

top = numberSpecifies the top position, in pixels. This value is relative to the upper-left corner of the screen. The value must be greater than or equal to 0.

width = numberInternet Explorer 7. Sets the width of the window in pixels. The minimum value is 250, and specifies the minimum width of the browsers content area. Prior to Internet Explorer 7 the minimum height value is 100.

zoominherit = { yes | no | 1 | 0 }

Note This documentation is preliminary and is subject to change.
Internet Explorer 8. The value "0" or "no" causes the child window or dialog to use the default zoom setting. The default is 0. The value "1" or "yes" causes the child window or dialog to inherit the parent's zoom setting. This value has effect only on the creation of a new window, which is only when the sName parameter = _blank. When the property is set to "1" or "yes":

The open sFeatures property scrollbars item is forced to 1.
The open sFeatures property resizeable item is forced to 1.
The window or dialog inherits the zoom percentage of the parent.
See Also: zoominherit.

bReplace Optional. Boolean that specifies whether the sURL creates a new entry or replaces the current entry in the window's history list. This parameter only takes effect if the sURL is loaded into the same window.

truesURL replaces the current document in the history list

falsesURL creates a new entry in the history list.

Return Value

Returns a reference to the new window object. Use this reference to access properties and methods on the new window.

Remarks

By default, the open method creates a window that has a default width and height and the standard menu, toolbar, and other features of Internet Explorer. You can alter this set of features by using the sFeatures parameter. This parameter is a string consisting of one or more feature settings.

When the sFeatures parameter is specified, the features that are not defined in the parameter are disabled. Therefore, when using the sFeatures parameter, it is necessary to enable all the features that are to be included in the new window. If the sFeatures parameter is not specified, the window features maintain their default values. In addition to enabling a feature by setting it to a specific value, simply listing the feature name also enables that feature for the new window.

Internet Explorer 5 allows further control over windows through the implementation of title in the sFeatures parameter of the open method. Turn off the title bar by opening the window from a trusted application, such as Microsoft Visual Basic or an HTML Application (HTA). These applications are considered trusted, because each uses Internet Explorer interfaces instead of the browser.

When a function fired by an event on any object calls the open method, the window.open method is implied.
Copy Code
<script language="JScript">
function myOpen() {
    open('about:blank');}
</script>
<body onclick="myOpen();">
Click this page and window.open() is called.
</body>
When an event on any object calls the open method, the document.open method is implied.
Copy Code
<button onclick="open('Sample.htm');">
Click this button and document.open() is called.
</button>
Internet Explorer 6 for Windows XP SP2 places several restrictions on windows created with this method. For several of the parameter values listed in the Parameters table, these restrictions are indicated by the minimum value. For more information, see About Window Restrictions.

This method must use a user-initiated action, such as clicking on a link or tabbing to a link and pressing enter, to open a pop-up window. The Pop-up Blocker feature in Internet Explorer 6 blocks windows that are opened without being initiated by the user. The Pop-up Blocker also prevents windows from appearing if you call this method from an onunload event.

In Internet Explorer 6, the _media value of the sName parameter specifies that this method loads a URL into the HTML content area of the Media Bar.

Internet Explorer 7. The Back, Forward, and Stop commands are now located in the Navigation bar of the user interface. Prior to Internet Explorer 7 navigation commands were located in the toolbar.

Internet Explorer 7 on Windows Vista. Opening a new window from an application other than the Internet Explorer process may result in a NULL return value. This occurs because Internet Explorer runs in protected mode by default. Protected mode prevents applications from privileged access to Internet Explorer when that access spans process boundaries. Because this method opens windows in a new process, protected mode restricts access to the new window. For more information, please see Understanding and Working in Protected Mode Internet Explorer.

Internet Explorer 8. A test.

Example

This example uses the open method to create a new window that contains Sample.htm. The new window is 200 pixels by 400 pixels and has a status bar, but it does not have a toolbar, menu bar, or address field.
Copy Code
window.open("Sample.htm",null,
    "height=200,width=400,status=yes,toolbar=no,menubar=no,location=no");

Programming

Window open example

Using the window.open method

Changing the features of the Popup

Moving the window to a desired location

Putting it all together

Popup On Exit

티스토리툴바

sURL	Optional. String that specifies the URL of the document to display. If no URL is specified, a new window with about:blank is displayed.
sName	Optional. String that specifies the name of the window. This name is used as the value for the TARGET attribute on a form or an anchor element. `_blank`The sURL is loaded into a new, unnamed window. `_media`The url is loaded in the Media Bar in Microsoft Internet Explorer 6. Microsoft Windows XP Service Pack 2 (SP2) and later. This feature is no longer supported. By default the url is loaded into a new browser window or tab. `_parent`The sURL is loaded into the current frame's parent. If the frame has no parent, this value acts as the value `_self`. `_search`Disabled in Windows Internet Explorer 7, see Security and Compatibility in Internet Explorer 7 for details. Otherwise, the sURL is opened in the browser's search pane in Internet Explorer 5 or later. `_self`The current document is replaced with the specified sURL . `_top`sURL replaces any framesets that may be loaded. If there are no framesets defined, this value acts as the value `_self`.
sFeatures	Optional. String that contains a list of items separated by commas. Each item consists of an option and a value, separated by an equals sign (for example, "fullscreen=yes, toolbar=yes"). The following features are supported. `channelmode = { yes \| no \| 1 \| 0 }`Specifies whether to display the window in theater mode. The default is no. Internet Explorer 7. channelmode = { yes \| 1 } overrides height, width, top, and left values. When active, the Navigation Bar is hidden and the Title Bar is visible. The Channel Band is no longer supported in Internet Explorer 7. Prior to Internet Explorer 7 channelmode = { yes \| 1 } displays the Channel Band in theatre mode. `directories = { yes \| no \| 1 \| 0 }`Specifies whether to add directory buttons. The default is yes. Internet Explorer 7. This feature is no longer supported. `fullscreen = { yes \| no \| 1 \| 0 }`Specifies whether to display the browser in full-screen mode. The default is no. Use full-screen mode carefully. Because this mode hides the browser's title bar and menus, you should always provide a button or other visual clue to help the user close the window. ALT+F4 closes the new window. Internet Explorer 7. A window in full-screen mode does not need to be in theatre mode. Prior to Internet Explorer 7 a window in full-screen mode must also be in theater mode (channelmode). height = numberInternet Explorer 7. Sets the height of the window in pixels. The minimum value is `150`, and specifies the minimum height of the browser content area. Prior to Internet Explorer 7 the minimum height value is `100`. left = numberSpecifies the left position, in pixels. This value is relative to the upper-left corner of the screen. The value must be greater than or equal to 0. `location = { yes \| no \| 1 \| 0 }`Internet Explorer 7. Specifies whether to display the navigation bar. The default is yes. Prior to Internet Explorer 7 this feature specifies whether to display the address bar. The Back, Forward, and Stop commands are now located in the Navigation bar. Prior to Internet Explorer 7 navigation commands were located in the toolbar. `menubar = { yes \| no \| 1 \| 0 }` Specifies whether to display the menu bar. The default is yes. Internet Explorer 7. By default the menu bar is hidden unless revealed by the ALT key. menubar = { no \| 0 } prohibits the menubar from appearing even when the Alt key is pressed. The combination of menubar = { no \| 0 } and toolbar = { no \| 0 } hides the toolbar and disables any additional third-party user interfaces. `resizable = { yes \| no \| 1 \| 0 }`Specifies whether to display resize handles at the corners of the window. The default is yes. Internet Explorer 7. resizable = { no \| 0 } disables tabs in a new window. `scrollbars = { yes \| no \| 1 \| 0 }`Specifies whether to display horizontal and vertical scroll bars. The default is yes. `status = { yes \| no \| 1 \| 0 }`Specifies whether to add a Status Bar at the bottom of the window. The default is yes. `titlebar = { yes \| no \| 1 \| 0 }`Specifies whether to display a Title Bar for the window. The default is yes. Internet Explorer 5.5 and later. This feature is no longer supported. The Title Bar remains visible unless the fullscreen sFeature is active. This parameter is ignored prior to Internet Explorer 5.5. It applies only if the calling application is an HTML Application or a trusted dialog box. `toolbar = { yes \| no \| 1 \| 0 }`Internet Explorer 7. Specifies whether to display the browser command bar, making buttons such as Favorites Center, Add to Favorites, and Tools available. The default is yes. The combination of menubar = { no \| 0 } and toolbar = { no \| 0 } turn off the Toolbar and any additional third-party user interfaces. Prior to Internet Explorer 7 the toolbar sFeature specifies whether to display the browser toolbar, making buttons such as Back, Forward, and Stop available. top = numberSpecifies the top position, in pixels. This value is relative to the upper-left corner of the screen. The value must be greater than or equal to 0. width = numberInternet Explorer 7. Sets the width of the window in pixels. The minimum value is `250`, and specifies the minimum width of the browsers content area. Prior to Internet Explorer 7 the minimum height value is `100`. `zoominherit = { yes \| no \| 1 \| 0 }` Note This documentation is preliminary and is subject to change. Internet Explorer 8. The value "0" or "no" causes the child window or dialog to use the default zoom setting. The default is 0. The value "1" or "yes" causes the child window or dialog to inherit the parent's zoom setting. This value has effect only on the creation of a new window, which is only when the sName parameter = `_blank`. When the property is set to "1" or "yes": The open sFeatures property `scrollbars` item is forced to 1. The open sFeatures property `resizeable` item is forced to 1. The window or dialog inherits the zoom percentage of the parent. See Also: zoominherit.
bReplace	Optional. Boolean that specifies whether the sURL creates a new entry or replaces the current entry in the window's history list. This parameter only takes effect if the sURL is loaded into the same window. `true`sURL replaces the current document in the history list `false`sURL creates a new entry in the history list.