window.open () Details and browser compatibility questions sample discussion

Source: Internet
Author: User

This article mainly introduces window.open() Use and browser compatibility issues of knowledge, interested friends can refer to the next, basic syntax:
window.open(pageurl,name,parameters)
which
Pageurl as child window path
Name is child window name
Parameters is the window parameter (each parameter is separated by commas)

Ii. examples
Copy CodeThe code 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 open in the new form NewWindow, with a width of 800, a height of 500, 0 pixels from the top of the screen, 0 pixels on the left,

No toolbar, no menu bar, no scroll bar, no resizing, no address bar, no status bar.

Each browser pairs window.open() the window features sfeatures parameter support degree difference

Summary of running results for each browser:


In the table above, the level of support for each of the features parameter options for each browser, which requires special instructions, is as follows:

"Callout 1": IE7 IE8 Firefox Chrome Safari, when the "menubar" option is "Yes", the menu bar is not displayed by default and you need to press the ALT key to display the menu bar, whereas when the "menubar" option is "no", The menu bar does not appear even if you press the ALT key.
Callout 2: In Safari, opening the location option is the same as when the toolbar option is turned on.
"Callout 3": IE6 IE8 Chrome, using "Top" and "left" positioning, if the set coordinate values are too large, the pop-up window may appear outside the screen's viewable range.
"Callout 4": IE7 Firefox Safari Opera, using "Top" and "left" positioning, if the set of coordinate values is too large, the window will automatically adjust the "top" and "left" value, to ensure that the window appears normally in the screen visible area.
"Callout 5": In Chrome Opera, not supported"Left" and "top" are used independently without setting the "width" and "height" values, and the "left" and "top" setting values do not take effect.
"Callout 6": in Chrome, not supportedThe width and height settings do not take effect when the "left" and "height" values are not set independently using "width" and "height". In conjunction with the "Callout 5" note, the pop-up window in Chrome has to be assigned all regardless of whether you want to set the width height or the value in the position, otherwise it will not work.
"Callout 7": In Firefox Chrome, the address bar is always displayed.
"Callout 8": In Opera, the address bar is not displayed by default, but you can click on the top bar of the page to show him, set "Location=yes" after the address bar will be automatically displayed.
"Callout 9": In Chrome Opera, the menu bar is never displayed, regardless of how the "menubar" value is set.
"Callout 10": Firefox Safari Chrome Opera regardless of how the "resizable" value is set, the window can always be resized by the user.
"Callout 11": In Safari Chrome, scroll bars are always visible, regardless of how the "scrollbars" value is set, in the presence of scroll bars on the page.
"Callout 12": IE7 in Windows XP SP3 systemThe "status" parameter can be used to hide the status bar by default, while in Windows Vista systemThe default environment not supportedStatus parameter, the State bar is always visible. This with two systemThe IE7 minor version number in the default is different, the former version number is lower, the latter version number is higher.
"Callout 13": In Firefox, the status bar is always visible, regardless of the status value, while in Chrome Opera, the status bar is always invisible.
"Callout 14": In Chrome Opera, toolbars are never displayed, regardless of how the "toolbar" value is set.
In summary, visible window.openThere are significant differences in the Sfeatures parameter support of the method, which should be used with caution.

Generally we use window.openThe open page needs to be centered, sample code:
Copy CodeThe code is as follows:
var width=800; The width of the popup window;
var height=500; The height of the popup 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
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 removal of the length of the taskbar (taskbar)

window.open () Details and browser compatibility questions sample discussion

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.