Создаем popup окно для сайта
Всплывающие окна – один из самых старых способов, позволяющих показать пользователю дополнительный контент. Давайте разберемся как создается popup окно для сайта?
Запустите:
window.open('https://javascript.info/')
Этот код JavaScript откроет новое окно с указанным URL. Большинство современных браузеров откроет новую вкладку вместо нового окна.
Как обойти блокировку
В недавнем прошлом всплывающими окнами слишком злоупотребляли многие сайты, нацеленные на показ рекламы. Они буквально заваливали пользователей тоннами объявлений. Чтобы избежать этого, современные браузеры блокируют всплывающие окна и защищают своих пользователей.
Они блокируют всплывающие окна, если они были вызваны вне пользовательских обработчиков событий:
// 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 позволяют отслеживать переключение между окнами.
Также, если мы открываем всплывающее окно, лучше сообщить об этом пользователю.