Как и почему работает onbeforeunload. Javascript страницу Как захватить событие закрытия окна браузера? Как взаимодействовать с окном после его открытия

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

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

Конечно, споры о том, стоит ли добавлять всплывающее окно при закрытии страницы на свой сайт будут вечными. Одни говорят, что для тех, кто добавляет его — уготовлено отдельное место в Аду, что это дико бесит, что если я решил уйти, то я уйду и никакие всплывающие окна меня не остановят, а только будут раздражать. Другие говорят, что такие всплывающие окна повышают конверсию и отлично работают. Я думаю, попробовать стоит, а там, на основе статистики, и делать уже конкретные выводы относительной вашей ниши и продукта.

На самом деле, я не стал мудрствовать лукаво и просто немного изменил прошлую статью, добавил несколько строчек javascript кода. Раньше, модальное окно появлялось при первом посещении сайта. Сейчас оно будет показываться только при первом посещении сайта (когда курсор покидает основную область сайта и переходит в район вкладок). Если пользователь еще раз зайдет на сайт, то у него не будет показываться это окно. Реализовано это точно так же, как и в прошлой статье, при помощи cookie. Кука хранится 7 дней, можете указать любое количество на свое усмотрение.

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

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

И подключаем тему плагина, я пользуюсь стандартной, но вы можете написать и свою:

Теперь, чтобы работали наши cookie — добавим плагин cookies от Яндекса:

И подключаем скрипт config.js со следующим содержимым:

$(document).ready(function () { if (!$.cookie("smartCookies")) { $(document).mouseleave(function (e) { function getWindow() { $(".offer").arcticmodal({ closeOnOverlayClick: true, closeOnEsc: true }); }; setTimeout(getWindow, 1); $.cookie("smartCookies", true, { expires: 7, path: "/" }); }); }; });

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

Кстати, в прошлый раз забыл объяснить, что означают эти параметры:

CloseOnOverlayClick: true, closeOnEsc: true

• closeOnOverlayClick — позволяет закрыть окно при клике на любую область в не окна.
• closeOnEsc — закрывает окно при нажатии на Escape

Теперь о самой разметке страницы. Не изменилось ровным счетом — ничего.

Здесь будет ваше предложение, форма и т.п. Можете вставить форму или предложить подписаться на вас в социальных сетях

Немного объясню. modalInner — обертка модального окна, с display:none в стилях. offer — класс самого модального окна. Если будете менять его, то не забудьте поменять класс и в скрипте.

Вот такая простая реализация всплывающего окна при закрытии страницы. А как вы считаете, стоит ли использовать подобный эффект на сайте?

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

В этом разделе мы рассмотрим следующие методы объекта window:

• open() - предназначен для открытия окон (вкладок);
• close() - предназначен для закрытия окон. В основном используется для закрытия окон открытых методом open() ;
• print() - предназначен для печати содержимого окна;
• focus() - предназначен для передачи фокусу указанному окну;
• blur() - предназначен для удаления фокуса с указанного окна.

Параметры метода:

• В первом параметре указывается URL страницы, которую необходимо загрузить в это окно. Если значение данного параметра не задавать, то в окне будет отображена пустая страница (about:blank).
• Во втором параметре метода open указывается значение атрибута target или имя окна. Поддерживаются следующие значения:
• _blank - URL загружается в новое окно (вкладку). Это значение используется по умолчанию;
• _parent - URL загружается в родительский фрейм. Если его нет, то URL загружается в текущее окно (вкладку);
• _self - URL загружается в текущее окно;
• _top - отменяет все фреймы и загружает URL в текущее окно (вкладку) браузера. Если его нет, то URL загружается в текущее окно (вкладку);
• В качестве параметра Вы также можете указать имя открываемого окна. Данное имя является внутренним и может использоваться веб-разработчиками для вызова функций и методов этого окна.
• Третий параметр предназначен для указания набора свойств окна, которые вводятся через запятую. Поддерживаются следующие основные свойства окна:
• left , top - координаты (в пикселях) левого верхнего угла окна браузера относительно левого верхнего угла экрана. Значения этих свойств должны быть положительными или равными 0;
• height , width - высота и ширина рабочей области окна браузера. При указании значений необходимо учитывать, что ширина и высота окна браузера не может быть меньше 100 пикселей;
• resizable - логическое свойство окна, которое предназначено для включения или выключения возможности изменения размеров окна браузера. Данное свойство принимает следующие значения: yes или 1 , и no или 0 ;
• scrollbars - логическое свойство окна, которое предназначено для включения или выключения отображение полос прокрутки для содержимого окна браузера. Данное свойство принимает следующие значения: yes или 1 , и no или 0 ;
• status - логическое свойство окна, которое предназначено для включения или выключения отображения статусной строки браузера. Данное свойство принимает следующие значения: yes или 1 , и no или 0 .

Рассмотрим следующий примеры:

1. Открыть пустую страницу about:blank в новом окне. Данное окно должно иметь ширину и высоту, равную 250рх:

Window.open("","","width=250,height=250");

2. Открыть веб-страницу "http://сайт/" в текущем окне:

Window.open("http://сайт/", "_self");

3. Открыть новое окно, имеющее определённые свойства (top=100, left=100, width=400, height=500, scrollbars=yes, resizabie=yes):

Window.open("http://сайт", "_blank", "top=100, left=100, width=400, height=500, scrollbars=yes, resizable=yes");

Метод open() позволяет не только открыть окно, но и получить ссылку на данное окно. Данная ссылка позволяет взаимодействовать с этим окном посредством вызова определённых свойств и методов. Т.е. мы можем с помощью JavaScript кода, расположенного в одном окне управлять другим окном.

Например, для того чтобы обратиться к объекту document открытого окна:

Открыть пустое новое окно и вывести в ней некоторый текст:

Var myWindow = window.open("", "", "width=250, height=250"); myWindow.document.write("

Некоторый текст

Примечание: Взаимодействовать Вы можете только с теми окнами, которые сами открыли, с другими окнами Вы работать не можете.

Он предназначен для закрытия окна. Данный метод не имеет параметров. Он обычно используется для закрытия окон созданных методом open() . В противном случае, когда Вы попытаетесь закрыть окно (вкладку), открытое самим пользователем (не из JavaScript), то браузер из-за соображений безопасности запросит у пользователя подтверждение на выполнение этого действия.

Например, cоздадим кнопки для открытия и закрытия окна с именем myWindow:

//создать переменную, в которой будем хранить ссылку на объект window открытого окна var myWindow; function myWindowOpen { myWindow = window.open("http://www.yandex.ru", “myWindow", "width=250, height=250"); } function myWindowClose { if (myWindow) { myWindow.close(); myWindow = null; } } Oткрыть oкно Закрыть окно

Он предназначен для печати содержимого окна. Данный метод не имеет параметров.

function myPrint() { window.print(); } Печать страницы

Он предназначен для передачи фокусу указанному окну. Данный метод не имеет параметров.

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

function myWindowOpen() { var myWindow = window.open("", "", "width=200,height=100"); } function myWindowFocus() { myWindow.focus(); } function myWindowBlur() { myWindow.blur(); } Открыть окно Передать фокус окну Переместить окно на задний план

В этом разделе рассмотрим следующие свойства объекта window:

• name - предназначено для получения или установления внутреннего имени окна;
• opener - позволяет получить в текущем окне, ссылку на окно (объект window), с которого было открыто данное окно;
• closed - свойство логического типа, которое возвращает: true , если окно закрыто и false , если окно открыто.

Данное свойство очень часто используется для изменения внутреннего имени окна, после того как оно уже открыто. Кроме этого, свойство name может вернуть текущее значение внутреннего имени окна.

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

Данное имя в основном используется в гиперссылках и формах для указания окна, в котором необходимо открыть страницу. Например, для указания внутреннего имя окна в гиперссылке используется атрибут target , Если элемент а имеет атрибут target="searchWindow" , то при нажатии на данную ссылку браузер сначала пытается найти окно с таким внутренним именем (searchWindow), если окна с таким внутренним именем не существует, то он открывает новое окно и присваивает ему имя searchWindow . А если окно с таким именем существует, то новое окно не открывается, а перезагружается страница по указанной ссылке а этом окне. По умолчанию окна а браузере не имеют внутреннего имени.

Например, откроем страницу "http://www.google.com/" в окне, имеющем имя myWindow:

window.name = "myWindow";

Например, откроем окно с помощью метода open() и выведем в нём его имя:

var wnd = window.open("","myTest","width=200, height=300"); wnd.document.write("

Это окно имеет имя:" + wnd.name +".");

Данное свойство позволяет получить в окне, ссылку на исходное окно (объект window), т.е. на окно из которого было открыто данное окно.

Например, у Вас есть исходное окно (1), в котором Вы с помощью метода ореn() открываете другое окно (2). В этом окне (2) Вы можете с помощью свойства opener получить окно (1).

function openMyWindow() { var myWindow=window.open("","","width=200,height=200"); myWindow.document.write("Oткрытое окно (2)");