Differences in the behavior of window.open in different browsers
When developing a single site, I was faced with the need to test the operation of the window.open function in different browsers. I decided to draw the results and put it out, you see who you need, and who will add, which is even better ...
The following were used for testing: FireFox 3 beta 3, Netscape Navigator 9, Internet Explorer 6, Opera 9 and Konqueror 3.5 (Safari test separately, at the end of the topic). At the same time, FireFox 3 was tested in two configurations: by default and with TabMixPlus (with permission to open popups in new windows). Work environment: KDE 3.5 on Debian.
The first used design:
FireFox 3 (TMP)
Opened a full-sized window, maximized to full screen (as well as the parent).
Firefox 3
Opened a new tab.
')
Navigator 9
Opened a full-sized window, maximized to full screen (as well as the parent).
Opera 9
Opened a new tab.
IE 6
Opened a full-sized window, maximized to full screen (as well as the parent).
Konqueror
Opened the window with the default size (the parent window was maximized to the entire desktop).
Now I set the dimensions for the new window.
FireFox 3 (with and without TMP)
Opened a window with a viewing area of 640x480 pixels. The window displays the status bar and the address bar (inactive).
The window itself exceeds the specified size due to the status bar, address bar, title bar, and window borders. Window sizes are changeable.
Navigaror 9 and Konqueror
Opened a window with a viewing area of 640x480 pixels. The window itself exceeds the specified size due to the title and borders of the window.
Window sizes are changeable.
Opera 9
Opened a window with a viewing area of 640x480 pixels. The window itself exceeds the specified size due to the title and borders of the window.
Also in the horse there is a small panel, when clicked, it unfolds in the navigation panel . This reduces the viewport, and the window size does not change. Window sizes are resizable (meaning by the user, using the mouse).
IE 6
Opened a window with a viewing area of 640x480 pixels. The window itself exceeds the specified size due to the title and borders of the window. Window sizes are NOT resizable.
* * *
Now I set the window dimensions, obviously exceeding the monitor resolution.
FireFox 3, Navigator 9, Konqueror
Opened the window, expanded to the entire desktop. In FF3, the status bar and the address bar (inactive) are displayed in the window.
Opera 9
Opened a new tab.
IE 6
Opened a window that covered the entire screen, including all panels (tasks, menus, etc.). The title of the window outside the screen.
findings
Next in line are the coordinates of the window. For this there are two pairs of properties - left and top in IE and screenX and screenY for NN.
Alternately, I tried every pair in all browsers.
FireFox 3 , Navigator 9, IE6, Konqueror
All four browsers understood the properties left and top and positioned the window relative to the upper left corner of the screen.
Despite this point of reference, none of the browsers, with top = 0, could not block the menu bar with a window.
Opera 9
I also understood the properties left and top , but positioned the window relative to my tab bar (the countdown comes from the bottom).
These properties were understood only by Gecko-barsers (FF and NN), Opera and IE ignored them.
Interesting behavior when trying to set the position is clearly larger than the size of the screen.
FireFox 3, Navigator 9, Opera
Opened a window in the lower right corner of the desktop (Opera - your workspace). The window is visible entirely. Panels are not blocked.
Konqueror
I opened the window in the upper left corner of the desktop. Panels are not blocked.
IE6
Check failed. IE simply stopped opening windows before the process was forced to drop.
findings
Last, I checked the management of interface elements (excluding browser-specific elements):
Each parameter was tried with both yes and no values.
Firefox 3
Navigator 9
Opera 9
IE 6
Konqueror
Conclusions provide do yourself. Although in my opinion, IE here demonstrates a more correct implementation of the window.open function.
(thanks to qnick )
Safari 3.0.4 (5523.15), mac os 10.5.2
From the “Block Pop-ups” checkbox, the behavior does not change absolutely. If links are pressed together with an apple (forced opening of a window in a new tab), new windows will still appear.
No parameters: default size, position 32 pixels (approximately, to the eye) below and to the right of the current window (but if the lower border of the current window is very close to the lower border of the screen, then the new window has top = 0), toolbar, scroll and status line available, the window stretches in all directions
Sizes 640x480: the toolbar disappeared, the scroll and status bar disappeared, the window stopped dragging. The position is 32 pixels lower and to the right of the current one (or top = 0, see above), the dimensions are 640x480 + 32 pixels of the header.
Very large size: the size has changed to 1440x900 (screen resolution), top = 0, regardless of the position of the current window. Everything else is still.
Positioning: the countdown is from the upper left corner minus the menu, i.e.
Netscape style: same
Outside the desktop: left = 0, top = 0
Location: address bar and toolbar appeared, no scrolling, dimensions cannot be changed.
Menubar: ignored, i.e. similar to the size of 640x480.
Scrollbars: the same as the size of 640x480, but a vertical scroll appeared
Status: the same as the size of 640x480, but the status bar appeared.
Toolbar: the same as location.
It will be very nice if someone complements the tests on other browsers and platforms, first of all of course in Ineternet Explorer 7 under Windows.
PS
For a snack, I discovered an innovation in FireFox3 - now, by default, JavaScript cannot change the size and position of the window. To allow this, you must put the site in the list of exceptions.
The following were used for testing: FireFox 3 beta 3, Netscape Navigator 9, Internet Explorer 6, Opera 9 and Konqueror 3.5 (Safari test separately, at the end of the topic). At the same time, FireFox 3 was tested in two configurations: by default and with TabMixPlus (with permission to open popups in new windows). Work environment: KDE 3.5 on Debian.
1. Call without parameters
The first used design:
window.open ('http://www.w3.org/', 'popup');
FireFox 3 (TMP)
Opened a full-sized window, maximized to full screen (as well as the parent).
Firefox 3
Opened a new tab.
')
Navigator 9
Opened a full-sized window, maximized to full screen (as well as the parent).
Opera 9
Opened a new tab.
IE 6
Opened a full-sized window, maximized to full screen (as well as the parent).
Konqueror
Opened the window with the default size (the parent window was maximized to the entire desktop).
2. Window size
Now I set the dimensions for the new window.
window.open ('http://www.w3.org/', 'popup', 'width = 640, height = 480');
FireFox 3 (with and without TMP)
Opened a window with a viewing area of 640x480 pixels. The window displays the status bar and the address bar (inactive).
The window itself exceeds the specified size due to the status bar, address bar, title bar, and window borders. Window sizes are changeable.
Navigaror 9 and Konqueror
Opened a window with a viewing area of 640x480 pixels. The window itself exceeds the specified size due to the title and borders of the window.
Window sizes are changeable.
Opera 9
Opened a window with a viewing area of 640x480 pixels. The window itself exceeds the specified size due to the title and borders of the window.
Also in the horse there is a small panel, when clicked, it unfolds in the navigation panel . This reduces the viewport, and the window size does not change. Window sizes are resizable (meaning by the user, using the mouse).
IE 6
Opened a window with a viewing area of 640x480 pixels. The window itself exceeds the specified size due to the title and borders of the window. Window sizes are NOT resizable.
* * *
Now I set the window dimensions, obviously exceeding the monitor resolution.
window.open ('http://www.w3.org/', 'popup', 'width = 2000, height = 1200');
FireFox 3, Navigator 9, Konqueror
Opened the window, expanded to the entire desktop. In FF3, the status bar and the address bar (inactive) are displayed in the window.
Opera 9
Opened a new tab.
IE 6
Opened a window that covered the entire screen, including all panels (tasks, menus, etc.). The title of the window outside the screen.
findings
- All browsers regard the given size as the size of the viewing area.
- The actual size of the window is always greater than the specified, and the difference varies for different browsers, due to the presence of additional panels.
- In Internet Explorer 6, you cannot manually resize a window. By the way, this is the correct behavior of window.open, since all parameters not specified in the call of this function should be considered equal to “no” (including resizable). Although not always convenient from the user's point of view.
- It is necessary to monitor the size of the window being opened, since with a large size in IE6, it can block the entire desktop to the user
3. Positioning
Next in line are the coordinates of the window. For this there are two pairs of properties - left and top in IE and screenX and screenY for NN.
Alternately, I tried every pair in all browsers.
window.open ('http://www.w3.org/', 'popup', 'width = 320, height = 240, left = 50, top = 50');
FireFox 3 , Navigator 9, IE6, Konqueror
All four browsers understood the properties left and top and positioned the window relative to the upper left corner of the screen.
Despite this point of reference, none of the browsers, with top = 0, could not block the menu bar with a window.
Opera 9
I also understood the properties left and top , but positioned the window relative to my tab bar (the countdown comes from the bottom).
window.open ('http://www.w3.org/', 'popup', 'width = 320, height = 240, screenX = 50, screenY = 50');
These properties were understood only by Gecko-barsers (FF and NN), Opera and IE ignored them.
Interesting behavior when trying to set the position is clearly larger than the size of the screen.
window.open ('http://www.w3.org/', 'popup', 'width = 320, height = 240, left = 2000, top = 1000');
FireFox 3, Navigator 9, Opera
Opened a window in the lower right corner of the desktop (Opera - your workspace). The window is visible entirely. Panels are not blocked.
Konqueror
I opened the window in the upper left corner of the desktop. Panels are not blocked.
IE6
Check failed. IE simply stopped opening windows before the process was forced to drop.
findings
- To position the window, use the properties left and top , since they are understood by all barusers.
- Opera positions windows not relative to the screen, but relative to its tab bar.
- It is better to try to avoid situations when the window does not fit on the desktop, because browser behavior varies.
4. Interface elements
Last, I checked the management of interface elements (excluding browser-specific elements):
- location - the field to type the URL
- menubar - menu bar
- scrollbars - scrollbars
- status - status bar
- toolbar - panel with buttons Back, Forward, Reload, etc.
Each parameter was tried with both yes and no values.
Firefox 3
- location — always and always inactive — is ignored
- menubar - the main menu is displayed
- scrollbars - scroll bars appear
- status - ignored, the status bar is always shown
- toolbar - the URL string of the active stratum, a tab bar and additional panels appeared (WebDeveloper)
Navigator 9
- location - displayed inactive. Additionally, one of the toolbars was displayed (WebDeveloper)
- menubar - the main menu is displayed
- scrollbars - scroll bars appear
- status - the status bar appears
- toolbar - the URL string of the active stratum, a tab bar and additional panels appeared (WebDeveloper)
Opera 9
- location — shows the active input field and the Back, Forward, etc. buttons.
- menubar - ignored
- scrollbars - scroll bars appear
- status - ignored
- toolbar - ignored
IE 6
- location — shows the active input field, the main menu and the Back button, Forward button, etc.
- menubar - the main menu is displayed
- scrollbars - scroll bars appear
- status - the status bar appears
- toolbar - the main menu and toolbar is displayed
Konqueror
- location — always and always inactive — is ignored
- menubar - the main menu and toolbar is displayed
- scrollbars - scroll bars appear
- status - the status bar appears
- toolbar - the main menu and toolbar is displayed
Conclusions provide do yourself. Although in my opinion, IE here demonstrates a more correct implementation of the window.open function.
Check your browser
Safari
(thanks to qnick )
Safari 3.0.4 (5523.15), mac os 10.5.2
From the “Block Pop-ups” checkbox, the behavior does not change absolutely. If links are pressed together with an apple (forced opening of a window in a new tab), new windows will still appear.
No parameters: default size, position 32 pixels (approximately, to the eye) below and to the right of the current window (but if the lower border of the current window is very close to the lower border of the screen, then the new window has top = 0), toolbar, scroll and status line available, the window stretches in all directions
Sizes 640x480: the toolbar disappeared, the scroll and status bar disappeared, the window stopped dragging. The position is 32 pixels lower and to the right of the current one (or top = 0, see above), the dimensions are 640x480 + 32 pixels of the header.
Very large size: the size has changed to 1440x900 (screen resolution), top = 0, regardless of the position of the current window. Everything else is still.
Positioning: the countdown is from the upper left corner minus the menu, i.e.
Netscape style: same
Outside the desktop: left = 0, top = 0
Location: address bar and toolbar appeared, no scrolling, dimensions cannot be changed.
Menubar: ignored, i.e. similar to the size of 640x480.
Scrollbars: the same as the size of 640x480, but a vertical scroll appeared
Status: the same as the size of 640x480, but the status bar appeared.
Toolbar: the same as location.
Graduated
It will be very nice if someone complements the tests on other browsers and platforms, first of all of course in Ineternet Explorer 7 under Windows.
PS
For a snack, I discovered an innovation in FireFox3 - now, by default, JavaScript cannot change the size and position of the window. To allow this, you must put the site in the list of exceptions.
Source: https://habr.com/ru/post/20916/
All Articles