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

Question

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

Мне не удалось найти / создать что-либо, что может прочитать адресную строку и узнать, что вы покидаете сайт.

Answer 1

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

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

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

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

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

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

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

Answer 2

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

Пример запуска:

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; });
});

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

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

Answer 3

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

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.
}

Answer 4

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

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

Answer 5

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

Answer 6

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

$.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;
});

Answer 7

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

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