Создаем всплывающие окна 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 и открывается всплывающее окно с чатом.

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

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

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 могут отслеживать переключение между окнами.

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

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *