Создаем popup окно для сайта

2023-06-03 0 ∞

Всплывающие окна – один из самых старых способов, позволяющих показать пользователю дополнительный контент. Давайте разберемся как создается popup окно для сайта?

Запустите:

window.open('https://javascript.info/')

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

Как обойти блокировку
Как всплывающие окна используются сегодня
window.open
Пример простого popup-окна
Доступ к popup-окну
Доступ к окну opener
Закрытие всплывающего окна
Фокусировка popup-окна
Заключение

Как обойти блокировку

В недавнем прошлом всплывающими окнами слишком злоупотребляли многие сайты, нацеленные на показ рекламы. Они буквально заваливали пользователей тоннами объявлений. Чтобы избежать этого, современные браузеры блокируют всплывающие окна и защищают своих пользователей.

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

// popup-окно заблокировано
window.open('https://javascript.info');

// popup-окно разрешено
button.onclick = () => {
  window.open('https://javascript.info');
};

А что если всплывающее окно будет открываться с помощью обработчика onclick, но после setTimeout?

Напишите следующий код:

// откроется через 3 секунды
setTimeout(() => window.open('http://google.com'), 3000);

Всплывающее окно открывается в браузере Google Chrome, но блокируется в браузере Firefox. Но если мы сократим время задержки, заработает и в Firefox:

// откроется через 1 секунду
setTimeout(() => window.open('http://google.com'), 1000);

Браузер Firefox разрешает задержку в 2000мс или меньше. Но если она длится дольше, браузер блокирует окно.

Как всплывающие окна используются сегодня

Существует много методов для загрузки и отображения данных на странице с помощью JavaScript. Но иногда всплывающие окна работают лучше всего.

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

Преимущества технологии:

Popup-окно – это отдельное окно с собственным JavaScript-кодом. Что позволяет не использовать скрипты с главной страницы онлайн-магазина.
Простота реализации. Это всего лишь кнопка без дополнительных скриптов.
Вплывающее окно останется, даже если пользователь переходит на другую страницу. Например, консультант может посоветовать пользователю посетить страницу, на которой представлен какой-то новый товар. Пользователь переходит на эту страницу в основном окне, но при этом не покидает чат.

window.open

Рассмотрим синтаксис метода: window.open(url, name, params):

url

URL для загрузки в новое окно.

name

Название нового окна. Каждое окно имеет свой window.name. Нужно указать, какое окно использовать в качестве всплывающего.

params

Параметры конфигурации нового окна. Содержит перечисленные через запятую параметры. Например: width:200,height=100.

Параметры для params:

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

Пример простого popup-окна

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

let params = `scrollbars=no,resizable=no,status=no,location=no,toolbar=no,menubar=no,
width=0,height=0,left=-1000,top=-1000`;

open('/', 'test', params);

Большая часть параметров отключено и окно расположено за пределами экрана. Запустите этот код и посмотрите, что произойдет.

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

Добавим корректные значения width, height, left, top:

let params = `scrollbars=no,resizable=no,status=no,location=no,toolbar=no,menubar=no,
width=600,height=300,left=100,top=100`;

open('/', 'test', params);

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

Правила для не использованных в примерах параметров:

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

Доступ к popup-окну

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

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

let newWindow = open('/', 'example', 'width=300,height=300')
newWindow.focus();

newWindow.onload = function() {
  let html = `<div style="font-size:30px">Welcome!</div>`;
  newWindow.document.body.insertAdjacentHTML('afterbegin', html);
};

Для окон с URL, указывающими на другие сайты, можно поменять адрес источника, назначив newWindow.location=. Но нельзя получить доступ к содержимому. Это делается с целью обеспечения безопасности пользовательских данных.

Доступ к окну opener

JavaScript использует window.opener для доступа к окну, которое его открыло. Значение будет null для всех окон, кроме всплывающих окон.

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

Закрытие всплывающего окна

Чтобы закрыть popup-окно, нужно вызвать newWindow.close(). Метод close() можно вызвать для любого объекта window. Но window.close() игнорируется почти всеми браузерами, если окно было открыто не с помощью window.open().

Приведенный ниже код загружает, а потом закрывает окно:

let newWindow = open('/', 'example', 'width=300,height=300')
newWindow.onload = function() {
  newWindow.close();
  alert(newWindow.closed); // true
};

Фокусировка popup-окна

Для фокусировки и снятия фокуса с окна существуют такие методы, как window.focus() и window.blur() . Также есть события focus/blur, которые позволяют сфокусировать окно и поймать момент, когда посетитель переключается на другой элемент сайта.

В недавнем прошлом плохие страницы этим злоупотребляли. Например, посмотрите на приведенный ниже код:

window.onblur = () => window.focus();

Когда пользователь пытается переключиться на другое окно (blur), это возвращает его в предыдущее. Цель состоит в том, чтобы «заблокировать» пользователя в окне.

Существуют ограничения, которые запрещают подобный код. Они зависят от конкретного браузера.

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

Тем не менее, кое-что можно сделать. Например:

Когда мы открываем всплывающее окно, можно запустить в нем newWindow.focus() . Это гарантирует, что пользователь будет находиться в новом окне.
Если нужно проследить, когда посетитель использует наше веб-приложение, можно отслеживать события window.onfocus/onblur. Это позволяет нам приостанавливать/возобновлять действия на странице, анимацию и т. д.

Заключение

Всплывающее окно можно открыть вызовом метода open(url, name, params). Он возвращает ссылку в новое окно.
По умолчанию браузеры блокируют вызовы open, если они не были инициированы действиями пользователя. Обычно появляется уведомление, в котором пользователь может самостоятельно разрешить появление всплывающего окна.
Всплывающее окно может получить доступ к окну «opener», применив свойство window.opener. Поэтому главное и всплывающее окна связаны друг с другом.
Главное и всплывающее окна могут изменять друг друга, если у них один источник.
Чтобы закрыть popup-окно, используйте вызов close() . Пользователь тоже может закрыть всплывающее, как и любое другое окно на сайте.
Методы focus() и blur() позволяют наводить фокус и снимать его с окна.
События focus и blur позволяют отслеживать переключение между окнами.

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