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

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

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

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

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

Очень важно чтобы в процессе оформления заказа в интернет-магазине посетитель случайно не закрыл страницу или не перешел на другую страницу. Существует 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 – «запускает» работу перечисленных методов после загрузки страницы.

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

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

Прочитано 40821 раз
Мои услуги

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

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

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

Скачать

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

Наверх