JavaScript

индекс
246,46

Различия в поведении window.open в разных браузерах

При разработке одного сайта столкнулся с необходимостью проверить работу функции window.open в разных браузерах. Результаты решил оформить и выложить, глядишь кому понадобится, а кто и дополнит, что ещё лучше...

Для тестирования использовались: FireFox 3 beta 3, Netscape Navigator 9, Internet Explorer 6, Opera 9 и Konqueror 3.5 (тест Safari отдельно, в конце топика). При этом FireFox 3 тестировался в двух конфигурациях: по умолчанию и c TabMixPlus (с разрешением открывать popup-ы в новых окнах). Рабочая среда: KDE 3.5 на Debian.

1. Вызов без параметров


Первой использовалась конструкция:
window.open('http://www.w3.org/', 'popup');

FireFox 3 (TMP)
Открыл полноразмерное окно, развернутое на весь экран (как и родительское).

FireFox 3
Открыл новую вкладку.

Navigator 9
Открыл полноразмерное окно, развернутое на весь экран (как и родительское).

Opera 9
Открыла новую вкладку.

IE 6
Открыл полноразмерное окно, развернутое на весь экран (как и родительское).

Konqueror
Открыл окно с размером по умолчанию (родительское окно было развёрнуто на весь рабочий стол).

2. Размеры окна


Теперь я задал размеры новому окну.
window.open('http://www.w3.org/', 'popup', 'width=640,height=480');

FireFox 3 (и с TMP и без)
Открыли окно с областью просмотра 640x480 пикселей. В окне отображается строка состояния и адресная строка (неактивная).
Само окно превышает заданный размер за счёт строки состояния, адресной строки, заголовка и границ окна. Размеры окна изменяемы.

Navigaror 9 и Konqueror
Открыли окно с областью просмотра 640x480 пикселей. Само окно превышает заданный размер за счёт заголовка и границ окна.
Размеры окна изменяемы.

Opera 9
Открыла окно с областью просмотра 640x480 пикселей. Само окно превышает заданный размер за счёт заголовка и границ окна.
Так же в коне присутствует небольшая панель, при нажатии разворачивающаяся в панель навигации. При этом сокращается область просмотра, а размеры окна не меняются. Размеры окна изменяемы (имеется ввиду пользователем, при помощи мыши).

IE 6
Открыл окно с областью просмотра 640x480 пикселей. Само окно превышает заданный размер за счёт заголовка и границ окна. Размеры окна НЕ изменяемы.

* * *

Теперь я задал окну размеры, заведомо превышающие разрешение монитора.
window.open('http://www.w3.org/', 'popup', 'width=2000,height=1200');

FireFox 3, Navigator 9, Konqueror
Открыли окно, развёрнутое на весь рабочий стол. В FF3 в окне отображается строка состояния и адресная строка (неактивная).

Opera 9
Открыла новую вкладку.

IE 6
Открыл окно, закрывшее собой весь экран, включая все панели (задач, меню и т.д.). Заголовок окна за пределами экрана.

Выводы

  1. Все браузеры расценивают заданный размер как размер области просмотра.

  2. Реальные размеры окна всегда больше заданных, причём разница варьируется для разных браузеров, за счёт наличия дополнительных панелей.

  3. В Internet Explorer 6 нельзя вручную изменить размеры окна. Кстати, это правильное поведение window.open, т.к. все параметры, не указанные в вызове этой функции должны считаться равными "no" (включая resizable). Хотя это и не всегда удобно с точки зрения пользователя.

  4. Необходимо следить за размером открываемого окна, т.к. при большом размере в IE6 оно может перекрыть пользователю весь рабочий стол


3. Позиционирование


Следующие на очереди - координаты окна. Для этого существуют две пары свойств - left и top в IE и screenX и screenY для NN.
Поочерёдно я попробовал каждую пару во всех браузерах.

window.open('http://www.w3.org/', 'popup', 'width=320,height=240,left=50,top=50');

FireFox 3, Navigator 9, IE6, Konqueror
Все четыре браузера поняли свойства left и top и спозиционировали окно относительно верхнего левого угла экрана.
Не смотря на эту точку отсчёта, ни один из браузеров, при top = 0 не смог перекрыть окном панель меню.

Opera 9
Тоже поняла свойства left и top, но позиционировала окно относительно своей панели вкладок (отсчёт идёт от нижнего края).

window.open('http://www.w3.org/', 'popup', 'width=320,height=240,screenX=50,screenY=50');

Эти свойства поняли только Gecko-барузеры (FF и NN), Opera и IE их проигнорировали.

Интересно поведение при попытке задать позицию явно превышающую размеры экрана.

window.open('http://www.w3.org/', 'popup', 'width=320,height=240,left=2000,top=1000');

FireFox 3, Navigator 9, Opera
Открыли окно в нижнем правом углу рабочего стола (Opera - своей рабочей области). Окно видно целиком. Панели не перекрыты.

Konqueror
Окрыл окно в верхнем левом углу рабочего стола. Панели не перекрыты.

IE6
Проверить не удалось. IE просто переставал открывать окна до принудительного снятия процесса.

Выводы

  1. Для позиционирования окна следует использовать свойства left и top, т.к. их понимают все барузеры.

  2. Opera позиционирует окна не относительно экрана, а относительно своей панели вкладок.

  3. Лучше стараться избегать ситуаций когда окно не поместится на рабочем столе, т.к. поведение браузеров разнится.


4. Элементы интерфейса


Последними я проверил управление элементами интерфейса (исключив элементы, специфичные для конкретного браузера):

  • location - поле для набора URL

  • menubar - панель меню

  • scrollbars - полосы прокрутки

  • status - строка состояния

  • toolbar - панель с кнопками Back, Forward, Reload и т.д.


Каждый параметр пробовался как со значением yes, так и no.

FireFox 3

  • location - отображается всегда и всегда неактивно, параметр игнорируется

  • menubar - отображается главное меню

  • scrollbars - появляются полосы прокрутки

  • status - игнорируется, строка состояния показывается всегда

  • toolbar - строка URL страла активной, появилась панель вкладок и дополнительные панели (WebDeveloper)


Navigator 9

  • location - отображается неактивным. Дополнительно отобразилась одна из панелей инструментов (WebDeveloper)

  • menubar - отображается главное меню

  • scrollbars - появляются полосы прокрутки

  • status - появляется строка состояния

  • toolbar - строка URL страла активной, появилась панель вкладок и дополнительные панели (WebDeveloper)


Opera 9

  • location - отображается активное поле ввода и кнопки "Назад", "Вперёд" и т.д.

  • menubar - игнорируется

  • scrollbars - появляются полосы прокрутки

  • status - игнорируется

  • toolbar - игнорируется


IE 6

  • location - отображается активное поле ввода, главное меню и кнопки "Назад", "Вперёд" и т.д.

  • menubar - отображается главное меню

  • scrollbars - появляются полосы прокрутки

  • status - появляется строка состояния

  • toolbar - отображается главное меню и панель инструментов


Konqueror

  • location - отображается всегда и всегда неактивно, параметр игнорируется

  • menubar - отображается главное меню и панель инструментов

  • scrollbars - появляются полосы прокрутки

  • status - появляется строка состояния

  • toolbar - отображается главное меню и панель инструментов


Выводы предоставляю делать самим. Хотя на мой взгляд, IE здесь демонстрирует более правильную реализацию функции window.open.



Проверить свой браузер



Safari


(спасибо посмотреть профиль qnick)
Safari 3.0.4 (5523.15), mac os 10.5.2
От галочки «Блокировать всплывающие окна» поведение не меняется абсолютно. Если ссылки жать вместе с яблоком (принудительное открытие окна в новой вкладке), то все равно появляются новые окна.

Без параметров: размеры по умолчанию, позиция на 32 пикселя (примерно, на глаз) ниже и правее текущего окна (но если нижняя граница текущего окна очень близко находится от нижней границы экрана, то у нового окна top=0), тулбар, скролл и статусная строка в наличии, окно тянется во все стороны

Размеры 640х480: исчезли тулбар, скролл и статусная строка, окно перестало тянуться. Позиция на 32 пикселя ниже и правее текущего (или top=0, см. выше), размеры 640х480 + 32 пиксела заголовка.

Очень большой размер: размер изменился на 1440х900 (разрешение экрана), top=0 независимо от положения текущего окна. Все остальное по прежнему.

Позиционирование: отсчет идет от верхнего левого угла минус меню, т.е.
Позиционирование в Safari

В стиле Netscape: то же самое

Вне рабочего стола: left=0, top=0

Location: появилась адресная строка и тулбар, скролла нет, размеры менять нельзя.

Menubar: игнорируется, т.е. аналогично размеру 640х480.

Scrollbars: то же, что и размер 640х480, но появился вертикальный скролл

Status: то же, что и размер 640х480, но появился статусбар.

Toolbar: то же, что и location.


Окончанние


Будет очень здорово, если кто-нибудь дополнит тестами на других браузерах и платформах, в первую очередь конечно в Ineternet Explorer 7 под Windows.

P.S.
На закуску обнаружил новшество в FireFox3 — теперь по умолчанию JavaScript не может изменять размеры и позицию окна. Для разрешения этого требуется занести сайт в список исключений.

Блокировка JS
+41
27 февраля 2008, 20:15
55

комментарии (40)

+1
PQR #
Отлично! Некоторые наработки в этой области сам имел, но такой последовательный обзор будет очень полезен!
0
va1en0k #
и чего стоит это тестирование, если тут нет IE 7?
0
kronos #
Ну так методика описана проделайте ее для ие7 :). Под линуксом нет реализации ие7, а с виртуалками автор решил не связываться.
+3
sha1dy #
и что тут делает navigator 9? вместо firefox 2 что ли?
0
Mekras #
В некотором роде - да. До выхода первых бет FireFox 3, Navigator прочно заменил у меня FF2. Движок там тот же, а вот памяти он кушает сильно меньше.
0
jcp #
Кстати, а "NavOgator 9" - эт что за зверь такой? :)
(В последнем тесте)
0
Mekras #
Поправил.
0
Mekras #
kronos правильно написал, увы, я не видел иных переносов IE7 под Linux за исключнием вставки движка IE7 в интерфейс IE6, а это совсе не то, взять хотя бы отсутствие вкладок.
Именно поэтому я и пишу, что было бы замечательно если бы кто-нибудь посмотрел как это работает в IE7.
0
Tod #
Последнее открытие не очень веселое. Некоторые пользователи не в состоянии версию браузера сказать, а тут им еще объяснить что для корректной работы нужно "внести сайт в список исключений":)
–1
Snut #
не думаю что такие "пользователи" будут ставить гекко браузеры.
+2
chaRRge #
А где Safari?
+1
Mekras #
Если скажите где взять Safari под Linux (с windows-версией через wine пока что-то не срастается), буду очень благодарен. Кроме шуток.
0
qnick #
дайте ссылочки на страницы со скриптами, протестирую safari под макосью
самому лень делать =)
0
Mekras #
Добавил ссылку в конец заметки.
0
qnick #
Safari 3.0.4 (5523.15), mac os 10.5.2
От галочки «Блокировать всплывающие окна» поведение не меняется абсолютно. Если ссылки жать вместе с яблоком (принудительное открытие окна в новой вкладке), то все равно появляются новые окна.

Без параметров: размеры по умолчанию, позиция на 32 пикселя (примерно, на глаз) ниже и правее текущего окна (но если нижняя граница текущего окна очень близко находится от нижней границы экрана, то у нового окна top=0), тулбар, скролл и статусная строка в наличии, окно тянется во все стороны

Размеры 640х480: исчезли тулбар, скролл и статусная строка, окно перестало тянуться. Позиция на 32 пикселя ниже и правее текущего (или top=0, см. выше), размеры 640х480 + 32 пиксела заголовка.

Очень большой размер: размер изменился на 1440х900 (разрешение экрана), позиция — на 32 пиксела правее текущего. Все остальное по прежнему.

Позиционирование: отсчет идет от верхнего левого угла минус меню, т.е.


В стиле Netscape: то же самое

Вне рабочего стола: left=0, top=0

Location: появилась адресная строка и тулбар, скролла нет, размеры менять нельзя.

Menubar: игнорируется, т.е. аналогично размеру 640х480.

Scrollbars: то же, что и размер 640х480, но появился вертикальный скролл

Status: то же, что и размер 640х480, но появился статусбар.

Toolbar: то же, что и location.
0
qnick #
вкралась ошибка: при очень большом размере top=0 независимо от положения текущего окна
0
Mekras #
Добавил к тексту
0
thevery #
новая узвимость в ие6 найдена? =))
0
Pilot34 #
спасибо! Пригодится наверняка!
0
Silenius #
Прям кандидатская работа))
0
hlomzik #
ух, неплохо)
НО
не хватает таки FF2, например у меня попапы с неизменяемым размером открываются
так же не совсем понятны "игнорируется" - игнорируется и всегда отображается или игнорируется, и при этом не отображается?
0
shiko_1st #
В about:config ищете параметр dom.disable_window_open_feature.resizable и устанавливаете его значение в false (подробности обо всем этом в моем комменте ниже).
0
hlomzik #
спасибо)
все дебри about:config сложно изучить )
0
shiko_1st #
В комменте выше ошибочка — имелось в виду надо установить этот параметр в true, чтобы попапы всегда открывались с изменяемым размером. Виноват.
0
ofigenn #
Ну.. в общем, все понятно.. за исключением конечной цели автора работы. По результатам, имхо у IE самое предсказуемое поведение (что задал, то и получил).
0
Mekras #
Открою секрет :-) Как я написал в самом начале, это побочные результаты, полученные при работе разработке сайта. Конечная цель была убедить заказчика что в его случае (попапы достаточно большого размера) от использования попапов лучше отказаться. Ну а так, авось ещё кому сгодиться.
0
ofigenn #
Мм.. я считаю, что popup - это уже "дурной тон":) Раз уж пошёл разговор о секретах: удалось склонить клиента на светлую сторону?:)
0
Mekras #
Остановились на компромиссном варианте - открытие просто в новом окне.
0
shiko_1st #
Насчет Firefox есть тонкость.

Поведение метода window.open зависит от параметров в about:config и для включения/выключения деталей интерфейса регулируется значениями dom.disable_window_open_feature.*
В Firefox 1.5.0.12 и 2.0.0.4 по умолчанию запрещены параметры status (а также изменение статусбара). Я еще руками запрещаю location.
На возможность изменять размеры окна влияет параметр resizable. Если включен его запрет, то окно можно ресайзить в любом случае.

Так что наверное в FF3 поменяли умолчание для location и resizable, либо Вы их поменяли вручную.

Также важно, что вызов оного метода из консоли javascript никак не ограничен (можно даже использовать адреса протокола about:). Похоже, что в этом случае код исполняется вообще без ограничений безопасности.
0
Mekras #
Везде для чистоты старался использовать настройки по умолчанию.
+1
zakon #
Добавил статью в избранное, наверняка перечитаю, когда буду биться и недоумевать почему это окна везде разные? :)
0
gwinn #
спасибо, отличный обзор
0
vrazbros #
Очень жаль что нет тестироапгие под IE7. C попапами у меня там проблема, как не старался отключить вывод navigation bar (информации о адрессе - url) страницы так и не удалось. Причем в FF2, IE6, Opera 9 и Safari показывает нормально, а IE7 пихает светит url popup хот ты тресни. :(
0
kost #
У меня IE7 ообще не желает открывать popup-окно. Он открывает новую вкладку браузера.

Как это победить — я не придумал. буду рад, если кто-то подскажет.
0
kost #
ообще = вообще
0
random #
использовать showModalDialog() или showModelessDialog() вместо open()
0
hannimed #
Почему опера - она? :) "открыла"
Браузер - он мой!
0
Mekras #
Consuetudo... :-)
0
DirectX #
Был весьма удивлён возможностью IE создавать окно больше размеров рабочего стола. Насколько мне известно в Windows это запрещено. Т.е. даже если вызвать API функцию SetWindowPos или MoveWindow, то большие размеры не устанавливаются (раньше так думал, надо перепроверить).

Проверил это в IE7 под Vista, результаты таковы, что действительно окно такое, что чуть больше рабочего стола. Рассмотрев это дело поподробнее пришёл к выводу, что окно изменило размер таким образом, что его клиентская область стала размером с рабочий стол. Также нужно обратить внимание на то, что в отличие от скриншота, начальная позиция окна не выходила за пределы экрана - заголовок был виден.

Далее проверил в IE6 под XP. Здесь оказалось возможным создавать окно явно превышающее размеры рабочего стола. Это и правда очень странное решение. Правда XP проверял под VMWare, так что не исключено, что эксперимент не совсем чистый из-за виртуальности видеокарты, поддерживающей разрешения до 2360 x 1770. Возможно максимальный размер окна отсчитывается в данном случае от этой цифры.
0
imbeat #
спасибо! оч полезная оказалась статья!

Только зарегистрированные пользователи могут оставлять комментарии. Войдите, пожалуйста.