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.
The code is available in the file:
JavaScript Popup Example 4
Using the window.close method
It may be needed that you need to give a close link in the popup you created. The window.close () method could be used to close a window.
However, there are certain security restrictions for using the close () method.
The close method closes only windows opened by JavaScript using the open method. If you attempt to close any other window, a confirm message is displayed, asking the user to choose whether the window is to be closed or not.
If you have the reference to a window, you can use the reference to the window to close.
For example:
popup_window = window.open("");
.....
popup_window.close ();
You can close the current window using self.close ();
For example:
<A href="javascript: self.close ()">Close this Window</A>
Note:
You can create full featured, great looking popups without any programming.
Click here for more info
Sample Code for window.close()
<html>
<head>
<title>JavaScript Window Close Example </title>
</head>
<SCRIPT language="JavaScript1.2">
function popuponclick()
{
my_window = window.open("",
"mywindow","status=1,width=350,height=150");
my_window.document.write('<H1>The Popup Window</H1>');
}
function closepopup()
{
if(false == my_window.closed)
{
my_window.close ();
}
else
{
alert('Window already closed!');
}
}
</SCRIPT>
<body>
<P>
<A href="javascript: popuponclick()">Open Popup Window</A>
</P>
<P>
<A href="javascript: closepopup()">Close the Popup Window</A>
</P>
</body>
</html>
See the code above in work in the Link below.
JavaScript Window Close Example 1
Click on the 'Open Popup window' link to open the popup first and then click on the 'Close the Popup window' link to close the popup.
926
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
