Js сообщение при уходе со страницы
Обновлено: 04.07.2024
У жизненного цикла HTML-страницы есть три важных события:
- DOMContentLoaded – браузер полностью загрузил HTML, было построено DOM-дерево, но внешние ресурсы, такие как картинки и стили, могут быть ещё не загружены.
- load – браузер загрузил HTML и внешние ресурсы (картинки, стили и т.д.).
- beforeunload/unload – пользователь покидает страницу.
Каждое из этих событий может быть полезно:
Давайте рассмотрим эти события подробнее.
DOMContentLoaded
Событие DOMContentLoaded срабатывает на объекте document .
Мы должны использовать addEventListener , чтобы поймать его:
В этом примере обработчик DOMContentLoaded запустится, когда документ загрузится, так что он увидит все элементы, включая расположенный ниже .
Но он не дожидается, пока загрузится изображение. Поэтому alert покажет нулевой размер.
На первый взгляд событие DOMContentLoaded очень простое. DOM-дерево готово – получаем событие. Хотя тут есть несколько особенностей.
DOMContentLoaded и скрипты
Когда браузер обрабатывает HTML-документ и встречает тег
Есть два исключения из этого правила:
- Скрипты с атрибутом async , который мы рассмотрим немного позже, не блокируют DOMContentLoaded.
- Скрипты, сгенерированные динамически при помощи document.createElement('script') и затем добавленные на страницу, также не блокируют это событие.
DOMContentLoaded и стили
Внешние таблицы стилей не затрагивают DOM, поэтому DOMContentLoaded их не ждёт.
Но здесь есть подводный камень. Если после стилей у нас есть скрипт, то этот скрипт должен дождаться, пока загрузятся стили:
Причина в том, что скрипту может понадобиться получить координаты или другие свойства элементов, зависящих от стилей, как в примере выше. Естественно, он должен дождаться, пока стили загрузятся.
Так как DOMContentLoaded дожидается скриптов, то теперь он так же дожидается и стилей перед ними.
Встроенное в браузер автозаполнение
Firefox, Chrome и Opera автоматически заполняют поля при наступлении DOMContentLoaded .
Например, если на странице есть форма логина и пароля и браузер запомнил значения, то при наступлении DOMContentLoaded он попытается заполнить их (если получил разрешение от пользователя).
Так что, если DOMContentLoaded откладывается из-за долгой загрузки скриптов, в свою очередь – откладывается автозаполнение. Вы наверняка замечали, что на некоторых сайтах (если вы используете автозаполнение в браузере) поля логина и пароля не заполняются мгновенно, есть некоторая задержка до полной загрузки страницы. Это и есть ожидание события DOMContentLoaded .
window.onload
Событие load на объекте window наступает, когда загрузилась вся страница, включая стили, картинки и другие ресурсы.
В примере ниже правильно показаны размеры картинки, потому что window.onload дожидается всех изображений:
window.onunload
Когда посетитель покидает страницу, на объекте window генерируется событие unload . В этот момент стоит совершать простые действия, не требующие много времени, вроде закрытия связанных всплывающих окон.
Обычно здесь отсылают статистику.
Предположим, мы собрали данные о том, как используется страница: клики, прокрутка, просмотры областей страницы и так далее.
Естественно, событие unload – это тот момент, когда пользователь нас покидает и мы хотим сохранить эти данные.
Он посылает данные в фоне. Переход к другой странице не задерживается: браузер покидает страницу, но всё равно выполняет sendBeacon .
Его можно использовать вот так:
- Отсылается POST-запрос.
- Мы можем послать не только строку, но так же формы и другие форматы, как описано в главе Fetch, но обычно это строковый объект.
- Размер данных ограничен 64 Кб.
К тому моменту, как sendBeacon завершится, браузер наверняка уже покинет страницу, так что возможности обработать ответ сервера не будет (для статистики он обычно пустой).
Для таких запросов с закрывающейся страницей есть специальный флаг keepalive в методе fetch для общих сетевых запросов. Вы можете найти больше информации в главе Fetch API.
Если мы хотим отменить переход на другую страницу, то здесь мы этого сделать не сможем. Но сможем в другом месте – в событии onbeforeunload .
window.onbeforeunload
Если посетитель собирается уйти со страницы или закрыть окно, обработчик beforeunload попросит дополнительное подтверждение.
Если мы отменим это событие, то браузер спросит посетителя, уверен ли он.
Вы можете попробовать это, запустив следующий код и затем перезагрузив страницу:
readyState
Что произойдёт, если мы установим обработчик DOMContentLoaded после того, как документ загрузился?
Естественно, он никогда не запустится.
Есть случаи, когда мы не уверены, готов документ или нет. Мы бы хотели, чтобы наша функция исполнилась, когда DOM загрузился, будь то сейчас или позже.
Свойство document.readyState показывает нам текущее состояние загрузки.
Есть три возможных значения:
- "loading" – документ загружается.
- "interactive" – документ был полностью прочитан.
- "complete" – документ был полностью прочитан и все ресурсы (такие как изображения) были тоже загружены.
Так что мы можем проверить document.readyState и, либо установить обработчик, либо, если документ готов, выполнить код сразу же.
Например, вот так:
Также есть событие readystatechange , которое генерируется при изменении состояния, так что мы можем вывести все эти состояния таким образом:
Событие readystatechange – альтернативный вариант отслеживания состояния загрузки документа, который появился очень давно. На сегодняшний день он используется редко.
Для полноты картины давайте посмотрим на весь поток событий:
Здесь документ с , и обработчиками, которые логируют события:
Рабочий пример есть в песочнице.
- [1] начальный readyState:loading
- [2] readyState:interactive
- [2] DOMContentLoaded
- [3] iframe onload
- [4] img onload
- [4] readyState:complete
- [4] window onload
Цифры в квадратных скобках обозначают примерное время события. События, отмеченные одинаковой цифрой, произойдут примерно в одно и то же время (± несколько миллисекунд).
В данной заметке приведен пример скрипта на jQuery, который откроет модальное окно при попытке посетителя покинуть страницу.
А у нас еще много всякого интересного.
Работает данный способ просто: Как только мышка вылезла вверх к адресной строке, вкладкам и кнопке закрытия страницы – открывается модальное окно.
Пример можно поглядеть на этой странице.
Скрипт сделан таким образом, что на одной странице окно появится только 1 раз (при обновлении страницы или на любой другой, где он подключен, окно появится снова).
if ( ( $ ( ".exitblock" ) . is ( ':visible' ) ) && ( ! $ ( e . target ) . closest ( ".exitblock .modaltext" ) . length ) )
Если нужно, чтобы окно появлялось только 1 раз на всем сайте, используем cookie.
В этом случае JS нужно поставить такой:
if ( ( $ ( ".exitblock" ) . is ( ':visible' ) ) && ( ! $ ( e . target ) . closest ( ".exitblock .modaltext" ) . length ) )
Еще один вариант, в котором мы не показываем всплывающее окно, если посетитель провел на сайте определенное время.
if ( ( $ ( ".exitblock" ) . is ( ':visible' ) ) && ( ! $ ( e . target ) . closest ( ".exitblock .modaltext" ) . length ) )
Не забудьте, что на сайте должна быть подключена библиотека jQuery.
Смотрите также:
Модальные окна на CSS
Два варианта создания модальных окон без использования JavaScript
Модальное окно для контактов
Модальное окно для контактов или социальных сетей с фиксированной кнопкой
Добавить комментарий:
Комментарии:
А можно еще добавить чтобы на мобильниках показывалось через 30 секунд? То есть на дестопах при закрытие страницы, а на мобильниках через 30 секунд. Спасибо
Короче если навести на выпадающий список инпута в Chrome и если этот список будет очень большим, что вылезет из окна браузера, то тогда сработает триггер mouseleave. Не нашел пока способа решить эту проблему изящно.
Приветствую, а можете подсказать, как добавить событие, чтобы если человек например 10 секунд пробыл на странице, тоже всплывало это окно? И если оно открылось по времени, то при наведении его уже не было.
В последнем варианте темы заменяем первый:
$(".exitblock").remove(); на $(".exitblock").fadeIn("fast");
И соотв. 15 секунд на 10
Наверное немного неправильно выразился. Я хочу, чтобы это окно вылазило в таких вариациях:
1. Если наводим на строку выхода как сейчас.
2. Если человек провел на странице допустим 5 секунд, но не навёл на выход, а оно само вылезло.
Если срабатывает 2й вариант, то тогда желательно 1й уже не показывать.
А да, извиняюсь, работает. Спасибо!
Спасибо, все работает! Вопрос — как поменять modaltext на готовое всплывающее окно?
Тут так просто не скажешь…
Если у вас полностью свое модальное окно, тут надо не modaltext менять, а вообще все по сути.
При уходе курсора открывать его, а при закрытии удалять и добавлять при необходимости куки.
А если у вас просто оно нарисованное, то вставить в этот самый modaltext и все.
Ребят приветствую. А как по поводу конверсии? Никто не смотрел, не анализировал?
Меня просили ставить на пару сайтов, но потом просили убрать.
Спасибо за инфу
Все круто работает)) спасибо))
Если я правильно понял, то кука работает, но потом (при перезагрузке или другой странице).
Так и должно быть, страница же загрузилась и условие на ее чтение уже сыграло (когда ее не было).
Удалите окно через remove() и оно не появится вторично на странице.
А дальше соотв. будет работать условие куки.
подскажите где сделать шрифт больше?
Шрифт это font-size
Где именно? если меняю в font-size крестик меняет размер, сам шрифт остается такого же размера.
Тут нет оформления самого окна.
Оно же уникальное для всех случаев.
Используйте любое для класса modaltext
У вас JS код написан как HTML
Он должен быть в тегах script
О! Спасибо огромное, только при наведении на закрытие вкладки все равно ничего не происходит…
Попробуйте в скрипте изменить $ на jQuery
Или напишите в ВК мне, чтобы быстрее было 🙂
jQuery сработало — спасибо большое пребольшое.
Здравствуйте.
А подскажите, пожалуйста, что дописать в css чтобы у окна были не прямые углы, а закругленные?
Потестил — вроде работает, но вот уже сутки наблюдаю: есть пользователи, у которых по метрике и визит и 2-3 достижения цели…
Я ошибся с местом вызова ReachGoal?
В данной конструкции цель будет срабатывать всегда, когда курсор уходит к шапке браузера. Может и 20 раз на 1 посетителе. Т.е. окно не показывается, а цель сработает.
Поставьте так цель в тоже место:
Взял чуть шире отрезок, ибо: на локалке, почему-то всё работает как надо. А вот на сервере — мотает по прежнему на каждый выход из body (
Кэш, естественно, чистый, как и куки
А куки вообще пишутся?
Я точно не помню, но тоже что то долго с ними воевал.
Пишутся, ибо при проверке на сервере — показывается 1 раз в сутки (до очистки кук)…
Так если показываются раз в день…. Все же работает, нет?
Александр! Спасибо огромное, работает.
Правда, с особенностями: если модальное окно скрыто выход за body — цель не срабатывает. Так и надо.
Если модальное окно открыто выход за body (первый выход за body). Цель срабатывает. Так и надо
Если модальное окно открыто несколько выходов за body (туда-сюда мышкой возякать). Цель срабатывает. Так не надо, но не критично )))
В общем, работает всё, кроме того что, если при открытом модальном окне выйти N раз за body, то столько раз цель и будет выполнена.
Пеоеменную можно поставить, для разового выполнения:
Ответить в ветку уже не могу, видимо ограничение на вложенность комментов.
Спасибо Вам огромное. Кошеля Яденьги или wm на сайте не нашел, поэтому направил свою скромную благодарность на указанный телефонный номер. Любой труд должен быть если не оплачен, то вознагражден.
И Вам спасибо!
Обращайтесь, если что 🙂
Добрый день!
Подскажите, пожалуйста, только начинаю работать в веб-разработке и появилась задача реализации выпадающего окна, когда пользователь хочет выйти из сайта.
Подходит Ваш второй вариант скрипта, но , к сожалению, не получается его корректно применить, возможно, что-то не так делаю..(дополнительно к проекту подключаю jquery-3.4.1)
Не совсем понятна фраза "Если нужно, чтобы окно появлялось только 1 раз на всем сайте, используем cookie."
это значит, что необходимо дополнительно подключить jquery-cookie?
Буду очень признательна за ответ!
jquery-cookie подключать не надо.
А что не получается, ошибки какие нибудь появляются?
Может из-за кук как раз и не показывается окно вам, т.к. записывается кука, с которой окно не появляется.
Хорошее решение, автору спасибо. Вариант с куки вообще супер, очень частая проблема что многие примеры модалок и других призывов, которые требуют куки, как правило идут без них, процветания …..
На первом примере можете сделать if при выxоде "или" после 60 секунд наxождения на сайте? Я проста жаваскрипт не знаю.
setTimeout("document.getElementById('exitblock').style.display='block'", 60000);
добавлять после кода и добавить id на элемент. тогда появится окно через 60 сек.
Добрый день. Спасибо за Ваше решение, будем его использовать у себя на сайте.
Я прошу прощения, но мне не совсем понятно с всплывающей формой на сайте через 60 секунд. Вроде сделал как Вы написали а ничего не работает. Можете поподробнее рассказать ка реализовать данную функцию?
Спасибо, уже сам разобрался.
Пробовал устанавливать по-очереди все три варианта скрипта, но что-то у меня не пошло. После установки на сайт модальное окно изначально видно и никоим образом не убирается. Мне нужен второй вариант. Я в JS не силён и потому понять в чём причина мне сложно. Браузер Яндекс. В других пока не пробовал. Буду признателен, если подскажите. Устанавливал вроде всё правильно. Стили после библиотеки, скрипт после стилей ( перед ), сам код окна перед
Бывают ситуации, когда необходимо отследить уход пользователя со страницы и выполнить какое-либо действие.
Самое простое, чем можно воспользоваться, это отследить событие onbeforeunload — пользователь покидает страницу.
Браузеры расценивают переходы по ссылкам, обновление страницы как уход с нее, поэтому код выше выведет всплывающее окно с просьбой подтвердить уход при вышеперечисленных действиях, но это не позволяет нам отследить именно закрытие вкладки.
С применением localStorage
Далее мы рассмотрим пример, как отследить именно закрытие вкладки. К сожалению, такого события в javascript нет, но можно доработать код и все получится.
Так же мы воспользуемся локальным хранилищем для наглядности при отслеживании изменения статуса, который будем менять при закрытии вкладки.
При заходе на сайт у нас будет в локальном хранилище записана запись с ключом status и значением true. Далее будет выполняться следующий код:
Этот код будет отслеживать переходы по ссылкам и менять значение переменной linkClick на true, при клике на ссылках. Тем самым мы исключаем изменения записи в локальном хранилище при перезагрузке страницы (что так же считается уходом со страницы) из-за перехода по ссылке.
А дальше идет уже знакомое событие onbeforeunload, которое при уходе со страницы проверит, если значение переменной linkClick равно true, то был совершен переход по ссылке, а если false, то выполнится условие и запись в локальном хранилище изменится на Закрыли вкладку и следовательно была именно закрыта вкладка.
Тем самым мы записали в хранилище, что вкладка была закрыта и можем это проверить, обратившись снова к хранилищу, при повторном заходе пользователя на сайт.
С применением sessionStorage
Теперь рассмотрим пример с применением sessionStorage, а перед этим вспомним о различие local и session хранилища.
Период хранения данных в lacalStorage — бессрочный, а в sessionStorage до завершения сессии, то есть до закрытия вкладки, чем мы и воспользуемся.
При заходе на сайт у нас в хранилище сессий записана запись с ключом status и значением true. Далее будет выполняться следующий код:
Если запись в хранилище есть, то условие не выполнится, значит пользователь, возможно и переходил по ссылкам или перезагружал страницу, но не закрывал вкладку. Но вот если записи нет, то условие выполнится и это означает, что вкладка была закрыта.
Затем браузеры поумнели и стали дописывать вспомогательный текст, затрудняющий обман пользователя. Вот, например, как это делает IE8:
Практически аналогичный текст был в Firefox 3:
Если его весь прочитать, то становится понятно, что сообщил сайт, а что — браузер. Однако обмануть всё равно можно.
Правильнее поступили авторы Safari и Chrome. В этих браузерах окошки выглядят так:
Читайте также: