Window.open of details and examples of browser compatibility issues

  • 2020-03-30 03:09:38
  • OfStack

I. basic grammar:
Window. The open (pageURL, name, the parameters)
Among them:
PageURL is the path of the child window
Name is the name of the child window
Parameters are window parameters (separated by commas)

Second, the sample
 
<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 open in a new form, newwindow, 800 wide, 500 high, 0 pixels from the top of the screen, 0 pixels to the left of the screen,

No toolbar, no menu bar, no scroll bar, no resize, no address bar, no stateless bar.

The support degree of window.open() 's sFeatures parameter varies among browsers

Summary of running results of each browser:
< img SRC = "border = 0 / / files.jb51.net/file_images/article/201405/201405291444161.gif? 2014429144444 ">  

The above table shows the support degree of each browser to the various parameter options of features, among which the following are the ones that need special instructions:

[note 1] : in IE7, IE8, Firefox, Chrome and Safari, when the "menubar" option is "yes", the menubar will not be displayed by default. Only after pressing ALT key can the menubar be displayed; In contrast, when the "menubar" option is "no", the menubar is not displayed even when ALT is pressed.
[note 2] : in Safari, turning on the "location" option is the same as turning on the "toolbar" option.
[note 3] : in IE6 and IE8 Chrome, use "top" and "left" to locate. If the set coordinate value is too large, the popup window may appear outside the visual range of the screen.
[note 4] : in IE7, Firefox, Safari and Opera, use "top" and "left" to locate. If the setting value is too large, the window will automatically adjust the value of "top" and "left" to ensure that the window is normally displayed in the visual area of the screen.
[note 5] : in Chrome Opera, it is not supported to use "left" and "top" independently without setting the values of "width" and "height". At this time, the value of "left" and "top" is not valid.
[note 6] : in Chrome, it is not supported to use "width" and "height" independently without setting the values of "left" and "height". At this time, the set values of "width" "height" are not valid. In combination with [note 5], it is clear that no matter whether the pop-up window in Chrome wants to set one or more values in width, height or position, all of them must be assigned, otherwise they 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 bar at the top of the page to display it. After setting "location=yes", the address bar will be displayed automatically.
[note 9] : no menubar is ever displayed in Chrome Opera, no matter how the "menubar" value is set.
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, scrollbars are always visible in the presence of scrollbars on the page, no matter how the "scrollbars" value is set.
[note 12] : IE7 can support "status "parameter hidden status bar by default in Windows XP SP3 system; In Windows Vista, the "status" parameter is not supported by default, and the status bar is always visible.
[note 13] : in Firefox, the status bar is always visible regardless of the "status" value, while in Chrome Opera, by contrast, the status bar is never visible.
[note 14] : in Chrome Opera, no toolbar is displayed regardless of the "toolbar" value.
To sum up, it can be seen that the support degree of sFeatures parameter of window.open method varies greatly, so it should be used with caution.

Generally, when we open a page with window.open, we need to center it.
 
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; //The 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 availHeight and height
 
window.screen.width  Returns the current screen width ( Resolution values ) 
window.screen.height  Returns the current screen height ( Resolution values ) 
screen.availWidth,screen.availHeight Refers to remove taskbar( The task bar ) Outside the length and width  

Related articles: