Матвей Земсков

Заметки веб-мастера

Воскресенье, 17 августа 2014 14:52

JS-скрипт для подтверждения закрытия страницы

Оцените материал
(9 голосов)

Очень важно чтобы в процессе оформления заказа в интернет-магазине посетитель случайно не закрыл страницу или не перешел на другую страницу. Существует JS-скрипт, который может предотвратить эти нежелательные действия. Например, он используется на Яндекс.Маркете. Смысл его работы заключается в том, что при попытке закрыть окно или вкладку браузера, появляется стандартное всплывающее окно с 2 кнопками «закрыть окно» и «остаться на странице». Правда в нем есть небольшой недостаток, он срабатывает не только на закрытие вкладки в окне браузера, но и при клике по ссылкам на странице, а также при отправке формы.

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

Благо, что существует усовершенствованный JS-скрипт, который срабатывает только на закрытие вкладок или окна. Его код я и приведу в этой заметке.

JavaScript

function Unloader(){

    var o = this;

    this.unload = function(evt)
    {
        var message = "Вы уверены, что хотите покинуть страницу оформления заказа?";
        if (typeof evt == "undefined") {
            evt = window.event;
        }
        if (evt) {
            evt.returnValue = message;
        }
        return message;
    }

    this.resetUnload = function()
    {
		$(window).off('beforeunload', o.unload);

         setTimeout(function(){
            $(window).on('beforeunload', o.unload);
        }, 2000);
    }

    this.init = function()
    {
        
		$(window).on('beforeunload', o.unload);

        $('a').on('click', function(){o.resetUnload});
        $(document).on('submit', 'form', function(){o.resetUnload});
		$(document).on('keydown', function(event){
			if((event.ctrlKey && event.keyCode == 116) || event.keyCode == 116){
				o.resetUnload;
			}
		});
	}
    this.init();
}

$(function(){
    if(typeof window.obUnloader != 'object')
    {
        window.obUnloader = new Unloader();
    }
})

Функция-конструктор Unloader(), содержит в себе несколько «методов»:

  • unload – срабатывает при закрытии окна или вкладки и показывает всплывающее окно с вопросом, текст которого хранится в переменой message. Правда, некоторые браузеры заменяют текст сообщения своим.
  • resetUnload – предотвращает показ всплывающего окна при клике по ссылкам и отправке форм.
  • init – «запускает» работу перечисленных методов после загрузки страницы.

Вот, собственно, и весь скрипт. Чтобы посмотреть, как он работает остается только подключить его к страницам сайта или зайти на демо-страничку.

Так как всплывающие окна являются стандартными окнами браузера, изменить их каким-либо образом невозможно. Во всех браузерах надписи на кнопках разные, возможности заменить текст надписей не существует. Кроме того, стандартные модальные окна нельзя позиционировать относительно окна браузера.

Прочитано 17671 раз
Добавить комментарий

Комментарии   

 
+1 # Сергей 15.10.2014 21:21
Скажите а можно ли заменить текст на кнопках "Покинуть " ,"Отмена"
Ответить | Ответить с цитатой | Цитировать
 
 
0 # Матвей 15.10.2014 22:24
Нет, к сожалению, нет возможности менять надписи на стандартных кнопках
Ответить | Ответить с цитатой | Цитировать
 
 
0 # Leonid 30.11.2014 16:23
Этот скрипт срабатывает на F5
Ответить | Ответить с цитатой | Цитировать
 
 
+1 # Матвей 10.12.2014 10:58
Теперь не срабатывает. Я поправил скрипт. Также не срабатывает на Ctrl+F5
Ответить | Ответить с цитатой | Цитировать
 
 
0 # Leonid 10.12.2014 12:59
А можно ли в это время в основном окне вывести какой нибудь попап лэер например с дополнительной скидкой?
Ответить | Ответить с цитатой | Цитировать
 
 
0 # Матвей 18.12.2014 09:46
Думаю, что в принципе это возможно сделать.
Ответить | Ответить с цитатой | Цитировать
 
 
0 # Leonid 10.12.2014 13:16
В chrome keydown - работает, а keypress - нет
Ответить | Ответить с цитатой | Цитировать
 
 
0 # Матвей 18.12.2014 09:43
Да, действительно. Исправил код.
Ответить | Ответить с цитатой | Цитировать
 
 
0 # человечишка 04.01.2015 21:49
Уважаемый, я заюзал твой скрипт. Спасибо тебе за работу!
P.S. добавь в исключение event.keyCode == 13 (кнопка ентер), т.к. некоторые "формы" сабмитятся с jquery И не имеют тегов form
Ответить | Ответить с цитатой | Цитировать
 
 
0 # Роман 30.01.2015 14:43
привет.можно изменить немного получится чтоб при закрытии вкладки было предложено остаться и перейти на главною страницу или показать рекламный блок?
Ответить | Ответить с цитатой | Цитировать
 
 
0 # Матвей 05.02.2015 10:51
Нет, Роман, в данном скрипте так сделать не получится. Для описанного вами функционала нужно написать другой скрипт. В принципе, за основу можно взять скрипт из статьи.
Ответить | Ответить с цитатой | Цитировать
 
 
0 # Андрей 11.03.2015 15:30
А нет ли возможности как то обойти то что некоторые браузеры заменяют текст сообщения на свой стандартный? То что в этой компании Firefox очень печалит...
Ответить | Ответить с цитатой | Цитировать
 
 
0 # Матвей 13.03.2015 09:41
Нет, Андрей, к сожалению нет такой возможности
Ответить | Ответить с цитатой | Цитировать
 
 
0 # Никита 21.05.2015 17:04
А как добавить обработку нажатия OK модального окна ?
Ответить | Ответить с цитатой | Цитировать
 
 
0 # Матвей 25.05.2015 10:20
Никита, к сожалению, нет возможности «прикрепить» обработчик на клик по стандартным кнопкам в модальных окнах
Ответить | Ответить с цитатой | Цитировать
 
 
0 # Константин 13.10.2015 10:05
Спасибо за скрипт. Нужная вещь. Но есть одна проблемка. Скрипт выбрасывает окно при нажатии кнопки обновить в браузере. Можно ли обойти это?
Ответить | Ответить с цитатой | Цитировать
 
 
0 # Матвей 13.10.2015 13:02
Константин, на сколько мне известно, эту «кнопку» нельзя «отловить».
Ответить | Ответить с цитатой | Цитировать
 
 
0 # Игорь 18.12.2015 21:46
Есть ли возможность не выводить окно? нужно просто отправить данные на сервер при закрытии
Ответить | Ответить с цитатой | Цитировать
 
 
0 # Матвей 22.12.2015 17:01
Игорь, думаю что можно реализовать то, о чем вы пишите. Ознакомьтесь подробнее с событием beforeunload и jQuery.ajax(). В сети есть примеры кода с похожим функционалом.Я нашел в google по запросу "jquery beforeunload"
Ответить | Ответить с цитатой | Цитировать
 
 
0 # Игорь 22.12.2015 17:05
Да, вопрос решил, спасибо. :D
Ответить | Ответить с цитатой | Цитировать
 
 
0 # Илья 27.01.2016 14:19
Спасибо!
Ответить | Ответить с цитатой | Цитировать
 
 
0 # Анатолий 06.04.2016 16:07
А можно как то добавить воспроизведение звукового файла при попытке закрытия окна?
Ответить | Ответить с цитатой | Цитировать
 
 
+1 # Матвей 11.04.2016 09:55
Анатолий, в принципе можно попробовать это сделать: сначала вам необходимо написать JS-функцию, в которой будет создаваться HTML-элемент audio и заполняться его атрибуты, добавить его в функцию-конструктор Unloader() и вызвать добавленную функцию в функции unload. Чтобы узнать больше - погуглите "js звук на событие"
Ответить | Ответить с цитатой | Цитировать
 
Мои услуги

Предлагаю следующие услуги:

  • Верстка шаблона сайта из дизайн-макета для CMS «1С-Битрикс Управление сайтом» и CMS “Joomla”
  • Создание форм различной сложности (обратная связь, анкеты и тп) для указанных CMS
  • Настройка и кастомизация компонентов и модулей для указанных CMS
  • Доработка модулей и компонентов для указанных CMS, добавление нестандартного функционала
  • Разработка лендингов (landing-pages)

По все вопросам обращайтесь через форму обратной связи

Скачать

Предлагаю вашему вниманию: