Отображать предупреждение при выходе из сайта, а не только на страницу

Во-первых, определите, какие события могут отвлечь вашего пользователя от вашего сайта?

1. Щелчок ссылки внутри вашего содержимого веб-сайта
2. Представление формы для внешнего действия
3. Javascript из дочернего окна, которое меняет window.location на родителя
4. Пользователь, начинающий поиск в строке поиска (FF и IE)
5. Пользователь вводит поиск / адрес в адресной строке браузера.
6. Пользователь нажал кнопку «Назад» (или назад), когда он только что попал на ваш сайт
7. Пользователь нажал кнопку «вперед» (или сдвиг-backspace), когда они были у сайта, но вернулась туда, нажав кнопку «Назад»
8. Пользователь закрывает окно браузера

Так. что вы можете сделать по всем этим?

1. Это легко. Проверьте свои привязки, и если они указывают на внешнюю сторону, добавьте некоторые функции в событие onclick
2. Аналогично 1. Добавьте свою функциональность для события onsubmit формы, отправляемой вне вашего сайта.
3. -> 8. На самом деле нет подходящего решения, которое можно было бы контролировать. Вы можете злоупотреблять событием onbeforeunload столько, сколько хотите, но у вас не будет большого успеха, зная, что происходит. И есть определенные ограничения, связанные с onbeforeunload а также, поэтому ваши руки будут привязаны большую часть времени.

Реальный вопрос?

Почему вы хотите контролировать это событие в любом случае, за исключением того, чтобы беспокоить ваших пользователей, чтобы они не оставляли вас. В любом случае, прошение не дает большой справедливости в веб-мире. И когда какой-то сайт будет беспокоить меня сообщениями или еще хуже, препятствовать мне уйти, я больше не хочу возвращаться. Он пахнет плохой плохой юзабилити и дает намек на рекламный сайт.

Скорее попытайтесь заинтересовать своих пользователей , предоставив им ценный контент.

Ваш лучший beforeunload – прослушивание нестандартного события beforeunload . Это поддерживается почти всеми браузерами, ожидающими от Opera, которая, как известно, строго придерживается стандартов W3C.

Пример Kickoff:

 window.onbeforeunload = function() { return "You're leaving the site."; }; 

Это сообщение будет отображаться в виде диалога подтверждения.

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

 window.onbeforeunload = function() { return "You're leaving the site."; }; $(document).ready(function() { $('a[rel!=ext]').click(function() { window.onbeforeunload = null; }); $('form').submit(function() { window.onbeforeunload = null; }); }); 

Вам нужно всего лишь предоставить всем внешним ссылкам атрибут deacto standard rel="ext" чтобы обозначить, что это внешние ссылки.

 <a href="http://google.com" rel="ext">Google</a> 

Это может помочь

1. Вам нужно проверить событие onclick перед подключением initLocalLinkException() ;
2. Отказ от ответственности : он не проверен.

HTML :

 <a href="test.html">internal link</a> <a href="#test">html anchor</a> <a href="http://www.google.com">external link</a> <a href="http://www.google.com" target="_blank">blank external link</a> <form action="test.html" method="post" > <button type="submit">Post Button</button> </form> 

JavaScript :

 $(document).ready(function () { initLocalLinkException(); window.onbeforeunload = function () { confirmExit() }; $('form').submit(function () { window.onbeforeunload = null; }); }); function initLocalLinkException() { $('a').click(function () { if ($(this).attr('target') != '_blank') { var link = $(this).attr('href'); if (link.substr(0, 4) == 'http') { var LocalDomains = new Array('http://www.yourdomain.com', 'https://yourdomain.com', 'localhost', '127.0.0.1'); var matchCount = 0; $.each(LocalDomains, function () { if (this == link.substr(0, this.length)) { matchCount++; } }); if (matchCount == '0') { confirmExit(); } else { window.onbeforeunload = null; } } else { window.onbeforeunload = null; } } }); } function confirmExit() { alert('Are you sure?'); // Do whatever u want. } 

Взгляните на эту тему .

Одним из возможных способов достижения этого является использование Javascript для проверки всех тегов на вашей странице при загрузке и проверки того, связаны ли они с внешним сайтом. Если это так, вы можете добавить событие onclick чтобы показать окно подтверждения / предупреждения или что-то более элегантное. Конечно, использование jQuery значительно упростит Javascript, который вам придется писать, как в приведенном выше потоке.

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

 $.expr[':'].external = function(obj){ return !obj.href.match(/^mailto\:/) && (obj.hostname != location.hostname); }; $.expr[':'].internal = function(obj){ return obj.hostname == location.hostname; }; $(function() { var unloadMessage = function() { return "Don't leave me!"; }; $('a:internal').click(function() { window.onbeforeunload = null; }); $('form').submit(function() { window.onbeforeunload = null; }); $('a:external').click(function() { window.onbeforeunload = unloadMessage; }); window.onbeforeunload = unloadMessage; }); 

Возможно. Просто попробуйте ввести вопрос или ответ на SO, а затем перейдите к нему перед отправкой. Неважно, нажимаете ли вы ссылку или введите адресную строку, вы получаете сообщение «Вы уверены?». оповещения. Вы можете опубликовать сообщение на SO Meta, спрашивая, как они это делают.

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

В этом случае onbeforeunload запускается, когда пользователь покидает страницу / сайт.