1. Basic syntax:
window.open(pageURL, name, parameters)
in:
pageURL is the child window path
name is the child window name
parameters are window parameters (each parameters are separated by commas)
2. Example
The code copy is as follows:
<script type="text/javascript">
window.open('page.html','newwindow','height=500,width=800,top=0,left=0,
toolbar=no,menubar=no,scrollbars=no,resizable=no,location=no,status=no')
</script>
page.html will be opened in the new form newwindow, with a width of 800, a height of 500, 0 pixels from the top of the screen, and 0 pixels from the left of the screen,
No toolbar, no menubar, no scrollbar, cannot be resized, no address bar, no status bar.
There are differences in the support level of window features of window.open() in each browser
Summary of the running results of each browser:
The above table shows the degree of support for each browser for features parameter options, and the special explanations are as follows:
[Note 1]: In IE7 IE8 Firefox Chrome Safari, when the "menubar" option is "yes", the menu bar will not be displayed by default. You need to press the ALT key before the menu bar can be displayed; on the contrary, when the "menubar" option is "no", the menu bar will not be displayed even if the ALT key is pressed.
[Note 2]: In Safari, the display effect is the same as when the "location" option is turned on and the "toolbar" option is turned on.
[Note 3]: In IE6 IE8 Chrome, use "top" and "left" to locate. If the set coordinate value is too large, the pop-up window may be displayed outside the visual range of the screen.
[Note 4]: In IE7 Firefox Safari Opera, use "top" and "left" to locate. If the set coordinate value is too large, the window will automatically adjust the "top" and "left" values to ensure that the window is displayed normally in the visible area of the screen.
[Note 5]: In Chrome Opera, it is not supported to use "left" and "top" independently without setting the "width" and "height" values. At this time, the "left" and "top" setting values do not take effect.
[Note 6]: In Chrome, it is not supported to use "width" and "height" independently without setting the "left" and "height" values. At this time, the "width" "height" setting values do not take effect. Combined with the instructions of [Note 5], we can see that no matter if you want to set one or several values in the width, height or position of the pop-up window in Chrome, you must assign them all, otherwise none of them will work.
[Note 7]: In Firefox Chrome, the address bar will always be displayed.
[Note 8]: In Opera, the address bar does not display by default, but you can click on the horizontal bar at the top of the page to display it. After setting "location=yes", the address bar will be automatically displayed.
[Note 9]: In Chrome Opera, the menu bar will never be displayed regardless of how the "menubar" value is set.
[Note 10]: No matter how the "resizable" value is set in Firefox Safari Chrome Opera, the window can always be resized by the user.
[Note 11]: In Safari Chrome, when there is a scrollbar on the page, the scrollbar is always visible regardless of how the "scrollbars" value is set.
[Note 12]: IE7 can support the "status" parameter to hide the status bar by default in Windows XP SP3 system; while the "status" parameter is not supported in the default environment of Windows Vista system, and the status bar is always visible. This is related to the different default IE7 small version numbers in the two systems. The former has a lower version number and the latter has a higher version number.
[Note 13]: In Firefox, the status bar is always visible no matter how the "status" value is set, while in Chrome Opera, the status bar is always invisible in the opposite direction to the former.
[Note 14]: In Chrome Opera, the toolbar is never displayed regardless of how the "toolbar" value is set.
To sum up, it can be seen that there are huge differences in the support level of sFeatures parameter of the window.open method, so you must be careful when using it.
Generally, when we use window.open to open the page, we need to display it in the center. Sample code:
The code copy is as follows:
var width=800; //The width of the pop-up window;
var height=500; //The height of the pop-up window;
var top = (window.screen.availHeight-height)/2; //The vertical position of the window;
var left = (window.screen.availWidth-width)/2; //Horizontal position of the window;
window.open('page.html','newwindow','height='+height+',width='+width+',top='+top+',left='+left+',
toolbar=no,menubar=no,scrollbars=no,resizable=no,location=no,status=no')
The difference between availableHeight and height
The code copy is as follows:
window.screen.width Returns the current screen width (resolution value)
window.screen.height Returns the current screen height (resolution value)
screen.availWidth,screen.availHeight refers to the length and width except taskbar.