Открытие окон и методы window

Всплывающее окно («попап» – от англ. Popup window) – один из древнейших способов показать пользователю ещё один документ.

… и откроется новое окно с указанным URL. Большинство современных браузеров по умолчанию будут открывать новую вкладку вместо отдельного окна.

Попапы существуют с доисторических времён. Они были придуманы для отображения нового контента поверх открытого главного окна. Но с тех пор появились другие способы сделать это: JavaScript может загрузить содержимое вызовом fetch и показать его в тут же созданном

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

Однако, для некоторых задач попапы ещё используются, например для OAuth-авторизации (вход через Google/Facebook/…), так как:

1. Попап – это отдельное окно со своим JavaScript-окружением. Так что открытие попапа со стороннего, не доверенного сайта вполне безопасно
2. Открыть попап очень просто.
3. Попап может производить навигацию (менять URL) и отсылать сообщения в основное окно.

Блокировка попапов

В прошлом злонамеренные сайты заваливали посетителей всплывающими окнами. Такие страницы могли открывать сотни попапов с рекламой. Поэтому теперь большинство браузеров пытаются заблокировать всплывающие окна, чтобы защитить пользователя.

Всплывающее окно блокируется в том случае, если вызов window.open произошёл не в результате действия посетителя (например, события onclick ).

Таким образом браузеры могут защитить пользователя от появления нежелательных попапов, при этом не отключая попапы полностью.

Что, если попап должен открываться в результате onclick , но не сразу, а только после выполнения setTimeout ? Здесь все не так-то просто.

Попап откроется в Chrome, но будет заблокирован в Firefox.

Но если мы уменьшим тайм-аут до одной секунды, то попап откроется и в Firefox:

Мы получили два разных результата из-за того, что Firefox «допускает» таймаут в 2000 мс или менее, но все, что свыше этого – не вызывает его доверия, т.к. предполагается, что в таком случае открытие окна происходит без ведома пользователя. Именно поэтому попап из первого примера будет заблокирован, а из второго – нет.

Полный синтаксис window.open

Синтаксис открытия нового окна: window.open(url, name, params) :

url URL для загрузки в новом окне. name Имя нового окна. У каждого окна есть свойство window.name , в котором можно задавать, какое окно использовать для попапа. Таким образом, если уже существует окно с заданным именем – указанный в параметрах URL откроется в нем, в противном случае откроется новое окно. params Строка параметров для нового окна. Содержит настройки, разделённые запятыми. Важно помнить, что в данной строке не должно быть пробелов. Например width=200,height=100 .

Параметры в строке params :

• Позиция окна:
  • left/top (числа) – координаты верхнего левого угла нового окна на экране. Существует ограничение: новое окно не может быть позиционировано вне видимой области экрана.
  • width/height (числа) – ширина и высота нового окна. Существуют ограничения на минимальную высоту и ширину, которые делают невозможным создание невидимого окна.
• Панели окна:
  • menubar (yes/no) – позволяет отобразить или скрыть меню браузера в новом окне.
  • toolbar (yes/no) – позволяет отобразить или скрыть панель навигации браузера (кнопки вперёд, назад, перезагрузки страницы) нового окна.
  • location (yes/no) – позволяет отобразить или скрыть адресную строку нового окна. Firefox и IE не позволяют скрывать эту панель по умолчанию.
  • status (yes/no) – позволяет отобразить или скрыть строку состояния. Как и с адресной строкой, большинство браузеров будут принудительно показывать её.
  • resizable (yes/no) – позволяет отключить возможность изменения размера нового окна. Не рекомендуется.
  • scrollbars (yes/no) – позволяет отключить полосы прокрутки для нового окна. Не рекомендуется.

Помимо этого существует некоторое количество не кроссбраузерных значений, которые обычно не используются. Найти примеры таких свойств можно по ссылке.

Пример: минималистичное окно

Давайте откроем окно с минимальным набором настроек, просто чтобы посмотреть, какие из них браузер позволит отключить:

В этом примере большинство настроек заблокированы и само окно находится за пределами видимой области экрана. Посмотрим, что получится в результате. Большинство браузеров «исправит» странные значения – как, например, нулевые width/height и отрицательные left/top . Например, Chrome установит высоту и ширину такого окна равной высоте и ширине экрана, так что попап будет занимать весь экран.

Давайте исправим значения и зададим нормальные координаты ( left и top ) и значения размеров окна ( width и height ):

Большинство браузеров выведет окно с заданными нами настройками.

Правила для опущенных параметров:

• Если третий аргумент при вызове open отсутствует или он пустой, будут использованы настройки окна по умолчанию.
• Если строка параметров передана, но некоторые параметры yes/no пропущены, то считается, что указано no , так что соответствующие возможности будут отключены, если на это нет ограничений со стороны браузера. Поэтому при задании параметров убедитесь, что вы явно указали все необходимые yes.
• Если координаты left/top не заданы, браузер попытается открыть новое окно рядом с предыдущим открытым окном.
• Если не заданы размеры окна width/height , браузер откроет новое окно с теми же размерами, что и предыдущее открытое окно.

Доступ к попапу из основного окна

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

Например, здесь мы генерируем содержимое попапа из JavaScript:

А здесь содержимое окна модифицируется после загрузки:

Обратите внимание: сразу после window.open новое окно ещё не загружено. Это демонстрируется в строке (*) . Так что нужно ждать onload , чтобы его изменить. Или же поставить обработчик DOMContentLoaded на newWin.document .

Окна имеют свободный доступ к содержимому друг друга только если они с одного источника (у них совпадают домен, протокол и порт (protocol://domain:port).

Иначе, например, если основное окно с site.com , а попап с gmail.com , это невозможно по соображениям пользовательской безопасности. Детали см. в главе Общение между окнами.

Доступ к открывшему окну из попапа

Попап также может обратиться к открывшему его окну по ссылке window.opener . Она равна null для всех окон, кроме попапов.

Если вы запустите код ниже, то он заменит содержимое открывшего (текущего) окна на «Тест»:

let newWin = window.open(«about:blank», «hello», «width=200,height=200»); newWin.document.write( «

Комментарии

• Если вам кажется, что в статье что-то не так — вместо комментария напишите на GitHub.
• Для одной строки кода используйте тег , для нескольких строк кода — тег

, если больше 10 строк — ссылку на песочницу (plnkr, JSBin, codepen…)

Если что-то непонятно в статье — пишите, что именно и с какого места.

Форум

Справочник

window.open

Синтаксис

Аргументы

Описание, примеры

Метод open создает новое окно браузера , аналогично команде «Новое окно» в меню браузера. Обычно это не вкладка, а именно новое окно, но в некоторых браузерах можно настроить то или иное поведение явным образом.

Если параметр strUrl — пустая строка, то в окно будет загружен пустой ресурс about:blank.

В любом случае, загрузка осуществляется асинхронно. Создается пустое окно, загрузка ресурса в которое начнется уже после завершения исполнения текущего блока кода.

Связь между окнами

Метод open возвращает ссылку на новое окно, которая служит для обращения к нему и вызову его методов, если это соответствует ограничениям безопасности Same Origin.

Если окно с именем winName уже существует, то вместо открытия нового окна, strUrl загружается в существующее, ссылка на которое возвращается. При этом строка параметров не применяется.

В случае, когда окно открыть не удалось, например, оно заблокировано штатными Popup-blocker’ами Firefox/IE — вызов open вернет null.
Проверяйте его, если не хотите лишних ошибок в своих скриптах.

Указание пустого strUrl для существующего имени окна — удобный способ получить ссылку на это окно без его перезагрузки.

Если вы хотите открывать новое окно при каждом вызове open() — используйте для winName специальное значение ‘_blank’.

Строка параметров

Необязательная строка параметров состоит из списка разделенных запятой настроек нового окна. После открытия окна их уже нельзя будет изменить.

Если строки параметров нет или она пустая, то для нового окна будут взяты параметры по умолчанию.

Если строка параметров указана, то не перечисленные в ней параметры будут отключены(кроме titlebar/close). Поэтому включите в ней свойства, которые нужны.

Если в параметрах не указаны размеры, то новое окно будет по размеру такое же, как последнее открытое.

Если не указана позиция нового окна, то оно откроется со сдвигом в 20-30 пикселей (зависит от браузера) от последнего открытого окна.
Такой сдвиг позволяет посетителю заметить, что открылось новое окно.
Если текущее окно максимизировано, то сдвига не будет: новое тоже будет максимизировано.

Основные кроссбраузерные параметры

Параметры, касающиеся элементов управления окна, могут быть жестко установлены в конфигурации браузера. В этом случае их указание в параметрах open() не даст нужного эффекта.

left/top Расстояние от левой/верхней границы окна операционной системы до границы нового окна. Новое окно не может быть создано за границами экрана height/width Высота/ширина в пикселях внутренности нового окна, включая полосы прокрутки, если они есть. Минимальное значение: 100 menubar Если этот параметр установлен в yes, то в новом окне будет меню. toolbar Если этот параметр установлен в yes, то в новом окне будет навигация (кнопки назад, вперед и т.п.) и панель вкладок location Если этот параметр установлен в yes, то в новом окне будет адресная строка directories Если этот параметр установлен в yes, то в новом окне будут закладки/избранное status Если этот параметр установлен в yes, то в новом окне будет строка состояния resizable Если этот параметр установлен в yes, то пользователь сможет изменить размеры нового окна. Рекомендуется всегда устанавливать этот параметр. scrollbars Если этот параметр установлен в yes, то новое окно при необходимости сможет показывать полосы прокрутки

Как по клику на кнопке открыть страницу в новой вкладке

Как по ссылке открыть страницу в новой вкладке знают все. Добавляем в ссылку атрибут target=»_blank» и радуемся. А вот по клику на кнопке открыть страницу в новой вкладке уже чуть сложнее. Ну нет у кнопки атрибута target.

На днях переносил наши корпоративные самописные сайты на новый хостинг и пришлось в коде сайтов вносить некоторые изменения. В ходе этой работы наткнулся на вот такую задачу — Как по клику на кнопке открыть страницу в новой вкладке. Саму по себе эту задачу я решил уже очень давно, много лет назад, но поскольку в то время я, можно сказать, на этих сайтах и учился web-программированию, то задача, как я убедился была решена не самым оптимальным образом. Менялся дизайн, наполнение, но кодинг в основном оставался прежним. А вот теперь, увидев этот код, я его быстренько оптимизировал, а заодно решил поделиться способом. Ведь многие пытаются что-то сами «прикрутить» к своим сайтам и вполне возможно, что статья кому-то и пригодится.

В случае с ссылками действительно всё просто.

откроет указанную страницу в текущем окне, а

откроет уже в новой вкладке.

Как по клику на кнопке открыть страницу в новой вкладке?

Во-первых, чтобы вообще что-либо открыть по клику на кнопке, которая к тому-же находится не в блоке формы, а сама по себе, надо использовать метод кнопки OnClick.

Например вот так:

В данном случае страница partners.php откроется в текущем окне браузера. Но бывает что надо открыть какую-то страницу в новом окне или вкладке. Как быть? В конструкцию Обновление статьи от 03.10.2019 г.

Да, отдельный JavaScript можно и не использовать. Все современные браузеры поддерживают некоторые скриптовые элементы и можно просто их использовать в коде своей кнопки.

Выглядит это примерно так:

Как видите, использование в OnClick команды window.open с нужной ссылкой — откроет её в новой вкладке. Если использовать этот вариант, то больше ничего не надо. Сам я столкнулся с такой необходимостью буквально сегодня, поэтому и решил дополнить статью этим вариантом.

Вот, собственно и всё. Теперь Вы знаете как по клику на кнопке открыть страницу в новой вкладке. Если кому-то это пригодится — пользуйтесь.

Различия в поведении 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
Открыл окно, закрывшее собой весь экран, включая все панели (задач, меню и т.д.). Заголовок окна за пределами экрана.

Выводы

1. Все браузеры расценивают заданный размер как размер области просмотра.
2. Реальные размеры окна всегда больше заданных, причём разница варьируется для разных браузеров, за счёт наличия дополнительных панелей.
3. В Internet Explorer 6 нельзя вручную изменить размеры окна. Кстати, это правильное поведение window.open, т.к. все параметры, не указанные в вызове этой функции должны считаться равными «no» (включая resizable). Хотя это и не всегда удобно с точки зрения пользователя.
4. Необходимо следить за размером открываемого окна, т.к. при большом размере в IE6 оно может перекрыть пользователю весь рабочий стол

Читайте также:  Visual foxpro для windows x64

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 независимо от положения текущего окна. Все остальное по прежнему.

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

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

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

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

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

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

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

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

Окончанние

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