Скрипт закрытия страницы. Как и почему работает onbeforeunload

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

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

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

Как сделать всплывающее окно при закрытии страницы

На самом деле, я не стал мудрствовать лукаво и просто немного изменил прошлую статью, добавил несколько строчек 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 — класс самого модального окна. Если будете менять его, то не забудьте поменять класс и в скрипте.

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

событие перезагрузки страницы js (14)

Я хочу захватить событие закрытия окна браузера / вкладки. Я попробовал следующее с jQuery:

JQuery(window).bind("beforeunload", function() { return confirm("Do you really want to close?") })

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

Возможно, просто beforeunload обработчик события beforeunload обработчике событий submit формы:

JQuery("form").submit(function() { jQuery(window).unbind("beforeunload"); ... });

Если ваше представление формы отправляет их на другую страницу (как я полагаю, это так, то есть запуск beforeunload), вы можете попытаться изменить beforeunload формы на вызов ajax. Таким образом, они не покинут вашу страницу при beforeunload формы, и вы можете использовать свой beforeunload привязки beforeunload своему усмотрению.

Попробуйте это также

Window.onbeforeunload = function () { if (pasteEditorChange) { var btn = confirm("Do You Want to Save the Changess?"); if(btn === true){ SavetoEdit();//your function call } else{ windowClose();//your function call } } else { windowClose();//your function call } };

После работал для меня;

$(window).unload(function(event) { if(event.clientY < 0) { //do whatever you want when closing the window.. } });

Я использовал Slaks, но это не работает, как есть, поскольку onbeforeunload returnValue анализируется как строка, а затем отображается в окне подтверждения браузера. Так отображается значение true, например «true».

Просто используя обратную связь. Вот мой код

Var preventUnloadPrompt; var messageBeforeUnload = "my message here - Are you sure you want to leave this page?"; //var redirectAfterPrompt = "http://www.google.co.in"; $("a").live("click", function() { preventUnloadPrompt = true; }); $("form").live("submit", function() { preventUnloadPrompt = true; }); $(window).bind("beforeunload", function(e) { var rval; if(preventUnloadPrompt) { return; } else { //location.replace(redirectAfterPrompt); return messageBeforeUnload; } return rval; })

Var validNavigation = false; jQuery(document).ready(function () { wireUpEvents(); }); function endSession() { // Browser or broswer tab is closed // Do sth here ... alert("bye"); } function wireUpEvents() { /* * For a list of events that triggers onbeforeunload on IE * check http://msdn.microsoft.com/en-us/library/ms536907(VS.85).aspx */ window.onbeforeunload = function () { debugger if (!validNavigation) { endSession(); } } // Attach the event keypress to exclude the F5 refresh $(document).bind("keypress", function (e) { debugger if (e.keyCode == 116) { validNavigation = true; } }); // Attach the event click for all links in the page $("a").bind("click", function () { debugger validNavigation = true; }); // Attach the event submit for all forms in the page $("form").bind("submit", function () { debugger validNavigation = true; }); // Attach the event click for all inputs in the page $("input").bind("click", function () { debugger validNavigation = true; }); }`enter code here`

Возможно, вы можете обработать OnSubmit и установить флаг, который вы позже проверите в обработчике OnBeforeUnload.

JQuery(window).bind("beforeunload", function (e) { var activeElementTagName = e.target.activeElement.tagName; if (activeElementTagName != "A" && activeElementTagName != "INPUT") { return "Do you really want to close?"; } })

Для решения, которое хорошо работало с сторонними элементами управления, такими как Telerik (например, RadComboBox) и DevExpress, которые используют теги Anchor по разным причинам, рассмотрите следующий код, который представляет собой слегка улучшенную версию кода desm с лучшим селектором для себя привязка тегов привязки:

Var inFormOrLink; $("a:not(), a").live("click", function() { inFormOrLink = true; }); $("form").bind("submit", function() { inFormOrLink = true; }); $(window).bind("beforeunload", function(eventObject) { var returnValue = undefined; if (! inFormOrLink) { returnValue = "Do you really want to close?"; } eventObject.returnValue = returnValue; return returnValue; });

Мой ответ направлен на предоставление простых тестов.

КАК

См. Ответ @SLaks .

$(window).on("beforeunload", function() { return inFormOrLink ? "Do you really want to close?" : null; })

Сколько времени займет браузер, чтобы, наконец, закрыть страницу?

Всякий раз, когда пользователь закрывает страницу (кнопка x или CTRL + W), браузер выполняет данный код перед beforeunload , но не на неопределенный срок. Единственным исключением является окно подтверждения (return "Do you really want to close?), Который будет ждать ответа пользователя.

Chrome : 2 секунды.
Firefox : ∞ (или двойной щелчок или принудительное закрытие)
Край : ∞ (или двойной щелчок)
Проводник 11 : 0 секунд.
Safari : TODO

Что мы использовали для проверки этого:

Сервер Node.js Express с журналом запросов
Следующий короткий HTML-файл

То, что он делает, - отправить как можно больше запросов, прежде чем браузер завершит свою страницу (синхронно).

function request() { return $.ajax({ type: "GET", url: "http://localhost:3030/" + Date.now(), async: true }).responseText; } window.onbeforeunload = () => { while (true) { request(); } return null; }

Выход Chrome:

GET /1480451321041 404 0.389 ms - 32 GET /1480451321052 404 0.219 ms - 32 ... GET /hello/1480451322998 404 0.328 ms - 32 1957ms ≈ 2 seconds // we assume it"s 2 seconds since requests can take few milliseconds to be sent.

Для решения кросс-браузера (протестированного в Chrome 21, IE9, FF15) рассмотрите следующий код, который представляет собой слегка измененную версию кода Slaks:

Var inFormOrLink; $("a").live("click", function() { inFormOrLink = true; }); $("form").bind("submit", function() { inFormOrLink = true; }); $(window).bind("beforeunload", function(eventObject) { var returnValue = undefined; if (! inFormOrLink) { returnValue = "Do you really want to close?"; } eventObject.returnValue = returnValue; return returnValue; });

Обратите внимание, что с Firefox 4 появляется сообщение «Вы действительно хотите закрыть?». не отображается. FF просто отображает общее сообщение. См. Примечание в https://developer.mozilla.org/en-US/docs/DOM/window.onbeforeunload

Событие beforeunload срабатывает всякий раз, когда пользователь покидает вашу страницу по какой-либо причине.

Например, он будет запущен, если пользователь отправит форму, щелкнет ссылку, закроет окно (или вкладку) или перейдет на новую страницу с помощью адресной строки, окна поиска или закладки.

Var inFormOrLink; $("a").on("click", function() { inFormOrLink = true; }); $("form").on("submit", function() { inFormOrLink = true; }); $(window).on("beforeunload", function() { return inFormOrLink ? "Do you really want to close?" : null; })

Для версий jQuery старше 1.7 попробуйте следующее:

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

Обратите внимание: если другой обработчик событий отменяет отправку или навигация, вы потеряете приглашение подтверждения, если окно фактически закрыто позже. Вы можете исправить это, записав время в событиях submit и click и проверив, будет ли beforeunload более чем через пару секунд.

Просто проверьте...

Function wopen_close(){ var w = window.open($url, "_blank", "width=600, height=400, scrollbars=no, status=no, resizable=no, screenx=0, screeny=0"); w.onunload = function(){ if (window.closed) { alert("window closed"); }else{ alert("just refreshed"); } } }

Начиная с jQuery 1.7, метод.live () устарел. Используйте.on () для присоединения обработчиков событий. Пользователи более старых версий jQuery должны использовать.delegate () в предпочтении.live ()

$(window).bind("beforeunload", function() { return true || confirm("Do you really want to close?"); });

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

Методы объекта window: open() , close() , print() , focus() и blur() .

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

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

Метод open() . Он предназначен для открытия нового окна (вкладки) в браузере и имеет следующий синтаксис:

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

В первом параметре указывается 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("

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

");

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

Метод close()

Он предназначен для закрытия окна. Данный метод не имеет параметров. Он обычно используется для закрытия окон созданных методом 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кно Закрыть окно

Метод print()

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

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

Метод focus()

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

Метод blur()

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

Свойства объекта window: name , opener , closed .

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

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

Свойство name

Данное свойство очень часто используется для изменения внутреннего имени окна, после того как оно уже открыто. Кроме этого, свойство 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 +".");

Свойство opener

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

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

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