JavaScript - Using the window.open method

​The syntax of the window.open method is given below:
window.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")

 

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 re-sizable 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");

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");

 

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 type="text/javascript">

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.

 

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 type="text/javascript">

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.

Comments

Popular posts from this blog

SharePoint Designer 2013 Approval Workflow with Comments

Change SharePoint server hostname and Web Application Names

The Timer Service Failed to Recycle