How to load a new page to a window using Javascript
Description
The window.open() method can
navigate to a particular URL and open a new browser window.
This method accepts four arguments:
- URL to load,
- window target,
- a string of features,
- a Boolean value to tell whether to take the place of the currently loaded page in the browser history.
If the second argument is the name of an existing window or frame, then the URL is loaded into the window or frame with that name.
//same as <a href="http://www.java2s.com" target="topFrame"></a>
window.open("http://www.java2s.com/", "topFrame");
The second argument may be any of the special window names:
- _self
- _parent
- _top
- _blank.
The third argument is a comma-delimited string indicating display information for the new window. The following table describes the various options.
| Setting | Value | Description |
|---|---|---|
| fullscreen | "yes"or "no" | Whether to use full to show the content. Internet Explorer only. |
| height | Number | The height of the new window. This cannot be less than 100. |
| left | Number | The left coordinate of the new window. This cannot be a negative number. |
| location | "yes"or "no" | Whether to display the location bar. |
| menubar | "yes"or "no" | Whether to show the menu bar. The default is "no". |
| resizable | "yes"or "no" | Is the new window going to resizable. The default is "no". |
| scrollbars | "yes"or "no" | If the new window can scroll. The default is "no". |
| status | "yes"or "no" | If the new window can have status bar. |
| toolbar | "yes"or "no" | If the window can have the toolbar. The default is "no". |
| top | Number | The top coordinate of the new window. This cannot be a negative number. |
| width | Number | The width of the new window. This cannot be less than 100. |
Any or all of these settings may be specified as a comma-delimited set of name-value pairs. The name-value pairs are indicated by an equal sign. No white space is allowed in the feature string.
window.open("http://www.java2s.com/",
"java2sWindow",
"height=400,width=400,top=10,left=10,resizable=yes");
The window.open() method returns a reference to the newly created window. This object can be used to manipulate the newly opened window:
var java2sWin =window.open("http://www.java2s.com/","myWindow");
java2sWin.resizeTo(500, 500);
java2sWin.moveTo(100, 100);
It's possible to close the newly opened window by calling the close() method as follows:
java2sWin.close();
This method works only for pop-up windows created by window.open().
The newly created window object has a reference back to the window that opened it via the opener property. For example:
var java2sWin =window.open("http://www.java2s.com/","java2sWindow");
document.writeln(java2sWin.opener == window); //true
Pop-up Blockers
You can tell if a pop-up was blocked by checking the return value:
When a browser add-on or other program blocks a pop-up,
window.open() typically throws an error.
<!DOCTYPE HTML>
<html>
<body>
<script type="text/javascript">
var blocked = false;
try { <!--from ww w . j a v a2s. c om-->
var myWin = window.open("http://www.java2s.com", "_blank");
if (myWin == null){
blocked = true;
}
} catch (ex){
blocked = true;
}
if (blocked){
document.writeln("The popup was blocked!");
}
</script>
</body>
</html>