javascript window open параметры
Открытие окон и методы window
Материал на этой странице устарел, поэтому скрыт из оглавления сайта.
Более новая информация по этой теме находится на странице https://learn.javascript.ru/popup-windows.
Всплывающее окно («попап» – от англ. Popup window) – один из старейших способов показать пользователю ещё один документ.
В этой статье мы рассмотрим открытие окон и ряд тонких моментов, которые с этим связаны.
…При запуске откроется новое окно с указанным URL.
Большинство браузеров по умолчанию создают новую вкладку вместо отдельного окна, но чуть далее мы увидим, что можно и «заказать» именно окно.
Блокировщик всплывающих окон
Рекламные попапы очень надоели посетителям, аж со времён 20-го века, поэтому современные браузеры всплывающие окна обычно блокируют. При этом пользователь, конечно, может изменить настройки блокирования для конкретного сайта.
Всплывающее окно блокируется в том случае, если вызов window.open произошёл не в результате действия посетителя.
Как же браузер понимает – посетитель вызвал открытие окна или нет?
Для этого при работе скрипта он хранит внутренний «флаг», который говорит – инициировал посетитель выполнение или нет. Например, при клике на кнопку весь код, который выполнится в результате, включая вложенные вызовы, будет иметь флаг «инициировано посетителем» и попапы при этом разрешены.
А если код был на странице и выполнился автоматически при её загрузке – у него этого флага не будет. Попапы будут заблокированы.
Полный синтаксис window.open
url URL для загрузки в новое окно. name Имя нового окна. Может быть использовано в параметре target в формах. Если позднее вызвать window.open() с тем же именем, то браузеры (кроме IE) заменяют существующее окно на новое. params Строка с конфигурацией для нового окна. Состоит из параметров, перечисленных через запятую. Пробелов в ней быть не должно.
Координаты верхнего левого угла относительно экрана. Ограничение: новое окно не может быть позиционировано за пределами экрана.
Ширина/высота нового окна. Минимальные значения ограничены, так что невозможно создать невидимое окно с нулевыми размерами.
Если координаты и размеры не указаны, то обычно браузер открывает не окно, а новую вкладку.
Браузер подходит к этим параметрам интеллектуально. Он может проигнорировать их часть или даже все, они скорее являются «пожеланиями», нежели «требованиями».
Доступ к новому окну
Вызов window.open возвращает ссылку на новое окно. Она может быть использована для манипуляции свойствами окна, изменения URL, доступа к его переменным и т.п.
В примере ниже мы заполняем новое окно содержимым целиком из JavaScript:
На этом уроке мы познакомимся с различными методами объекта window, которые позволяют открывать и закрывать окна, определять закрыто ли окно, а также получать его внутреннее имя и др.
Методы объекта window: open(), close(), print(), focus() и blur()
В этом разделе мы рассмотрим следующие методы объекта window :
Открытие нового окна или вкладки
В JavaScript открыть новое окно или вкладку из существующего документа можно с помощью метода « window.open ».
Настройки окна windowFeature :
Рассмотрим следующий примеры:
1. Открыть пустую страницу about:blank в новом окне. Данное окно должно иметь ширину и высоту, равную 250рх:
2. Открыть веб-страницу «http://itchief.ru/» в текущем окне:
3. Открыть новое окно, имеющее определённые свойства (top=100, left=100, width=400, height=500, scrollbars=yes, resizabie=yes):
Как взаимодействовать с окном после его открытия
Метод open() позволяет не только открыть окно, но и получить ссылку на данное окно. Данная ссылка позволяет взаимодействовать с этим окном посредством вызова определённых свойств и методов. Т.е. мы можем с помощью JavaScript кода, расположенного в одном окне управлять другим окном.
Например, для того чтобы обратиться к объекту document открытого окна:
Открыть пустое новое окно и вывести в ней некоторый текст:
Примечание: Взаимодействовать Вы можете только с теми окнами, которые сами открыли, с другими окнами Вы работать не можете.
Метод close()
Например, cоздадим кнопки для открытия и закрытия окна с именем myWindow :
Метод print()
Он предназначен для печати содержимого окна. Данный метод не имеет параметров.
Метод focus()
Он предназначен для передачи фокусу указанному окну. Данный метод не имеет параметров.
Метод blur()
Он предназначен, чтобы убрать фокус с указанного окна, т.е. перемещает его на задний план. Данный метод не имеет параметров.
Свойства объекта window: name, opener, closed
В этом разделе рассмотрим следующие свойства объекта window :
Свойство name
Данное свойство очень часто используется для изменения внутреннего имени окна, после того как оно уже открыто. Кроме этого, свойство name может вернуть текущее значение внутреннего имени окна.
Например, откроем страницу «http://www.google.com/» в окне, имеющем имя myWindow :
Например, откроем окно с помощью метода open() и выведем в нём его имя:
Свойство opener
Данное свойство позволяет получить в окне, ссылку на исходное окно (объект window ), т.е. на окно из которого было открыто данное окно.
Например, у Вас есть исходное окно (1), в котором Вы с помощью метода ореn() открываете другое окно (2). В этом окне (2) Вы можете с помощью свойства opener получить окно (1).
Свойство closed
Свойство closed возвращает логическое значение, указывающее закрыто окно или нет.
Открытие окон и методы window
Всплывающее окно («попап» – от англ. Popup window) – один из древнейших способов показать пользователю ещё один документ.
… и откроется новое окно с указанным URL. Большинство современных браузеров по умолчанию будут открывать новую вкладку вместо отдельного окна.
Попапы существуют с доисторических времён. Они были придуманы для отображения нового контента поверх открытого главного окна. Но с тех пор появились другие способы сделать это: JavaScript может загрузить содержимое вызовом fetch и показать его в тут же созданном
Кроме того, попапы не очень хороши для мобильных устройств, которые не умеют показывать несколько окон одновременно.
Однако, для некоторых задач попапы ещё используются, например для OAuth-авторизации (вход через Google/Facebook/…), так как:
Блокировка попапов
В прошлом злонамеренные сайты заваливали посетителей всплывающими окнами. Такие страницы могли открывать сотни попапов с рекламой. Поэтому теперь большинство браузеров пытаются заблокировать всплывающие окна, чтобы защитить пользователя.
Всплывающее окно блокируется в том случае, если вызов window.open произошёл не в результате действия посетителя (например, события onclick ).
Таким образом браузеры могут защитить пользователя от появления нежелательных попапов, при этом не отключая попапы полностью.
Попап откроется в Chrome, но будет заблокирован в Firefox.
Но если мы уменьшим тайм-аут до одной секунды, то попап откроется и в Firefox:
Мы получили два разных результата из-за того, что Firefox «допускает» таймаут в 2000 мс или менее, но все, что свыше этого – не вызывает его доверия, т.к. предполагается, что в таком случае открытие окна происходит без ведома пользователя. Именно поэтому попап из первого примера будет заблокирован, а из второго – нет.
Полный синтаксис window.open
Синтаксис открытия нового окна: window.open(url, name, params) :
Параметры в строке params :
Помимо этого существует некоторое количество не кроссбраузерных значений, которые обычно не используются. Найти примеры таких свойств можно по ссылке.
Пример: минималистичное окно
Давайте откроем окно с минимальным набором настроек, просто чтобы посмотреть, какие из них браузер позволит отключить:
Давайте исправим значения и зададим нормальные координаты ( left и top ) и значения размеров окна ( width и height ):
Большинство браузеров выведет окно с заданными нами настройками.
Правила для опущенных параметров:
Доступ к попапу из основного окна
Вызов open возвращает ссылку на новое окно. Эта ссылка может быть использована для управления свойствами окна, например, изменения положения и др.
Например, здесь мы генерируем содержимое попапа из JavaScript:
А здесь содержимое окна модифицируется после загрузки:
Окна имеют свободный доступ к содержимому друг друга только если они с одного источника (у них совпадают домен, протокол и порт (protocol://domain:port).
Доступ к открывшему окну из попапа
Если вы запустите код ниже, то он заменит содержимое открывшего (текущего) окна на «Тест»:
let newWin = window.open(«about:blank», «hello», «width=200,height=200»); newWin.document.write( «
Комментарии
Форум
Справочник
window.open
Синтаксис
Аргументы
Описание, примеры
В любом случае, загрузка осуществляется асинхронно. Создается пустое окно, загрузка ресурса в которое начнется уже после завершения исполнения текущего блока кода.
Связь между окнами
Метод open возвращает ссылку на новое окно, которая служит для обращения к нему и вызову его методов, если это соответствует ограничениям безопасности Same Origin.
Если окно с именем winName уже существует, то вместо открытия нового окна, strUrl загружается в существующее, ссылка на которое возвращается. При этом строка параметров не применяется.
Строка параметров
Необязательная строка параметров состоит из списка разделенных запятой настроек нового окна. После открытия окна их уже нельзя будет изменить.
Если строки параметров нет или она пустая, то для нового окна будут взяты параметры по умолчанию.
Если строка параметров указана, то не перечисленные в ней параметры будут отключены(кроме titlebar/close). Поэтому включите в ней свойства, которые нужны.
Если в параметрах не указаны размеры, то новое окно будет по размеру такое же, как последнее открытое.
Если не указана позиция нового окна, то оно откроется со сдвигом в 20-30 пикселей (зависит от браузера) от последнего открытого окна.
Такой сдвиг позволяет посетителю заметить, что открылось новое окно.
Если текущее окно максимизировано, то сдвига не будет: новое тоже будет максимизировано.
Основные кроссбраузерные параметры
Параметры, касающиеся элементов управления окна, могут быть жестко установлены в конфигурации браузера. В этом случае их указание в параметрах open() не даст нужного эффекта.
left/top Расстояние от левой/верхней границы окна операционной системы до границы нового окна. Новое окно не может быть создано за границами экрана height/width Высота/ширина в пикселях внутренности нового окна, включая полосы прокрутки, если они есть. Минимальное значение: 100 menubar Если этот параметр установлен в yes, то в новом окне будет меню. toolbar Если этот параметр установлен в yes, то в новом окне будет навигация (кнопки назад, вперед и т.п.) и панель вкладок location Если этот параметр установлен в yes, то в новом окне будет адресная строка directories Если этот параметр установлен в yes, то в новом окне будут закладки/избранное status Если этот параметр установлен в yes, то в новом окне будет строка состояния resizable Если этот параметр установлен в yes, то пользователь сможет изменить размеры нового окна. Рекомендуется всегда устанавливать этот параметр. scrollbars Если этот параметр установлен в yes, то новое окно при необходимости сможет показывать полосы прокрутки
Различия в поведении 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. Вызов без параметров
FireFox 3 (TMP)
Открыл полноразмерное окно, развернутое на весь экран (как и родительское).
FireFox 3
Открыл новую вкладку.
Navigator 9
Открыл полноразмерное окно, развернутое на весь экран (как и родительское).
Opera 9
Открыла новую вкладку.
IE 6
Открыл полноразмерное окно, развернутое на весь экран (как и родительское).
Konqueror
Открыл окно с размером по умолчанию (родительское окно было развёрнуто на весь рабочий стол).
2. Размеры окна
FireFox 3 (и с TMP и без)
Открыли окно с областью просмотра 640×480 пикселей. В окне отображается строка состояния и адресная строка (неактивная).
Само окно превышает заданный размер за счёт строки состояния, адресной строки, заголовка и границ окна. Размеры окна изменяемы.
Navigaror 9 и Konqueror
Открыли окно с областью просмотра 640×480 пикселей. Само окно превышает заданный размер за счёт заголовка и границ окна.
Размеры окна изменяемы.
Opera 9
Открыла окно с областью просмотра 640×480 пикселей. Само окно превышает заданный размер за счёт заголовка и границ окна.
Так же в коне присутствует небольшая панель, при нажатии разворачивающаяся в панель навигации. При этом сокращается область просмотра, а размеры окна не меняются. Размеры окна изменяемы (имеется ввиду пользователем, при помощи мыши).
IE 6
Открыл окно с областью просмотра 640×480 пикселей. Само окно превышает заданный размер за счёт заголовка и границ окна. Размеры окна НЕ изменяемы.
Теперь я задал окну размеры, заведомо превышающие разрешение монитора.
FireFox 3, Navigator 9, Konqueror
Открыли окно, развёрнутое на весь рабочий стол. В FF3 в окне отображается строка состояния и адресная строка (неактивная).
Opera 9
Открыла новую вкладку.
IE 6
Открыл окно, закрывшее собой весь экран, включая все панели (задач, меню и т.д.). Заголовок окна за пределами экрана.
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 просто переставал открывать окна до принудительного снятия процесса.
4. Элементы интерфейса
Проверить свой браузер
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 независимо от положения текущего окна. Все остальное по прежнему.
Позиционирование: отсчет идет от верхнего левого угла минус меню, т.е. 
В стиле Netscape: то же самое
Вне рабочего стола: left=0, top=0
Location: появилась адресная строка и тулбар, скролла нет, размеры менять нельзя.
Menubar: игнорируется, т.е. аналогично размеру 640х480.
Scrollbars: то же, что и размер 640х480, но появился вертикальный скролл
Status: то же, что и размер 640х480, но появился статусбар.
Toolbar: то же, что и location.
Окончанние
Будет очень здорово, если кто-нибудь дополнит тестами на других браузерах и платформах, в первую очередь конечно в Ineternet Explorer 7 под Windows.