Window. open () Explanation and browser compatibility examples

I. Basic Syntax:
Window. open (pageURL, name, parameters)
Where:
PageURL is the sub-window path
Name indicates the subwindow name.
Parameters is window parameters (parameters are separated by commas)

Ii. Example
Copy codeThe Code is as follows:
<Script type = "text/javascript">
Required parameter 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 newwindow of the new form. The width is 800, the height is 500, 0 pixels from the top of the screen, and 0 pixels from the left of the screen,

No tool bar, no menu bar, no scroll bar, no size adjustment, no address bar, no status bar.

Different browsers have different degrees of support for window. open () window features sFeatures.

Summary of running results of various browsers:
 

In the preceding table, the support for features parameter options by browsers is described as follows:

[NOTE 1]: In IE7 IE8 Firefox Chrome Safari, when the "menubar" option is "yes", the menu bar is not displayed by default. you must press ALT to display the menu bar; if the option "menubar" is "no", the menu bar is not displayed even if you press the ALT key.
[NOTE 2]: in Safari, when the "location" option is enabled, the display effect is the same as when the "toolbar" option is enabled.
[NOTE 3]: in IE6 IE8 Chrome, locate using "top" and "left". If the set coordinate value is too large, the pop-up window may be displayed outside the visible range of the screen.
[NOTE 4]: In IE7 Firefox Safari Opera, locate using "top" and "left". If the set coordinate value is too large, the window automatically adjusts the "top" and "left" values to ensure that the window is normally displayed in the visible area of the screen.
[Note 5]: In Chrome Opera, "left" and "top" cannot be used independently without setting "width" and "height" values ", the "left" "top" value does not take effect.
[NOTE 6]: In Chrome, "width" and "height" cannot be used independently without setting "left" and "height" values ", the value of "width" "height" does not take effect. According to [Note 5], all values must be assigned in the pop-up window in Chrome, regardless of the width or height or the number of values in the position. Otherwise, all values will not work.
[Note 7]: In Firefox Chrome, the address bar is always displayed.
[Note 8]: In Opera, the address bar is not displayed by default, but you can click the horizontal bar at the top of the page to display it. After setting "location = yes", the address bar is automatically displayed.
[Note 9]: In Chrome Opera, no matter how the "menubar" value is set, the menu bar is never displayed.
[Note 10]: regardless of the "resizable" value in Firefox Safari Chrome Opera, the window size can always be adjusted by the user.
[Note 11]: in Safari Chrome, when a page has a scroll bar, the scroll bar is always visible no matter how the "scrollbars" value is set.
[Note 12]: IE7 supports the "status" parameter to hide the status bar in Windows XP SP3 by default. The "status" parameter is not supported in Windows Vista by default, the status bar is always visible. this is different from the default IE7 minor version number in the two systems. The former version number is lower, and the latter version number is higher.
[Note 13]: In Firefox, the status bar is always visible regardless of how the "status" value is set. In Chrome Opera, the status bar is always invisible in contrast to the former.
[NOTE 14]: In Chrome Opera, no toolbar is displayed regardless of how the "toolbar" value is set.
To sum up, we can see that the sFeatures parameters of the window. open method have a huge difference in support degree, so be careful when using them.

Generally, the window. open page must be displayed in the center. Sample Code:
Copy codeThe Code 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;
Optional values open('page.html ', 'newwindow', 'height =' + height + ', width =' + width + ', top =' + top + ', left =' + left + ',
Toolbar = no, menubar = no, scrollbars = no, resizable = no, location = no, status = no ')

Difference between availHeight and height
Copy codeThe Code 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 other than taskbar (taskbar ).