javascript js - Определение между обновлением и закрытием действий браузера





head title (9)


    $(window).bind('unload', function () {
        if (/Firefox[\/\s](\d+)/.test(navigator.userAgent) && new Number(RegExp.$1) >= 4) {
            console.log('firefox delete');
            var data = { async: false };
            endSession(data);
            return null;
        }
        else {
            console.log('NON-firefox delete');
            var data = { async: true };
            endSession(data);
            return null;
        }
    });

    function endSession(data) {
        var id = 0

        if (window) { // closeed
            id=1
        }

        $.ajax({
            url: '/api/commonAPI/'+id+'?Action=ForceEndSession',
            type: "get",
            data: {},
            async: data.async,
            success: function () {
                console.log('Forced End Session');
            }
        });
    }

Используйте if (window), чтобы определить, закрыты или просто перезагружены. работая для меня.

Когда мы обновляем страницу (F5 или значок в браузере), она сначала запускает событие ONUNLOAD. Когда мы закроем браузер (значок X справа), он запустит событие ONUNLOAD. Теперь, когда запускается событие ONUNLOAD, нет возможности различать обновление страницы или закрытие браузера. Если у вас есть какое-то решение, то дайте мне.




Используйте событие window.onbeforeunload для случая, чтобы перейти от страницы, но он будет включать в себя обновляющие или привязывающие теги .... используйте флаг проверки для того же самого, 1 пример для процесса - это проверка URL (начальный URL = текущий URL-адрес ) или F5 с использованием кода ключа для обновления. В случае якорных меток используйте bind ()

Примечание * Кодовый код может вызвать проблему в случае Chrome.

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8">
<title>Test Page</title>

<style type='text/css'>
body {
    font-family: sans-serif;
}
</style>
<script src="jquery-1.9.1.js" type='text/javascript'></script>
<script type='text/javascript'>
var valid=false;
function wireUpEvents() {

if(valid){
alert("Page Refreshed or Redirected");
}else{

window.onbeforeunload = askWhetherToClose;

}
function askWhetherToClose(event) {

if(!valid){

    var msg;

    msg = "You're leaving the page, do you really want to?";
    event = event || window.event;
    event.returnValue = msg;
    return msg;
}}
$(document).bind('keypress', function(e) { 
 if (e.keyCode == 116){ 

 // or you can insert some code to check page refresh
 valid = true; 

//wireUpEvents();
 } 
 }); 
 $("a").bind("click", function() {
//To check redirection using Anchor tags  
 valid = true; 
 //wireUpEvents();
 }); 
 }
$(document).ready(function() { 
 wireUpEvents(); 

 });
</script>
</head>
<body>
<p>Close the browser window, or navigate to <a href="http://.com"></a></p>
</body>
</html>



Мое предыдущее решение работало для меня в IE. window.event будет неопределенным для браузеров, отличных от IE, поскольку «событие» определено глобально в IE, в отличие от других браузеров. Вам нужно будет указать событие в качестве параметра в случае других браузеров. Также, что clientX не определен для firefox, мы должны использовать pageX.

Попробуйте что-то вроде этого .... должен работать для IE и firefox ...

<html>
<body>
<script type="text/javascript">

window.onunload = function(e) {
// Firefox || IE
e = e || window.event;

var y = e.pageY || e.clientY;

if(y < 0)  alert("Window closed");
else alert("Window refreshed");

}
</script>
</body>
</html>



К сожалению, проверка значения clientY / pageY события, как это предложено некоторыми из ответов здесь, не является надежным способом определить, запускается ли событие unload вследствие того, что пользователь закрыл страницу.

Причина, по которой clientY / pageY отрицателен, когда вы нажимаете кнопку закрытия браузера, заключается в том, что кнопка закрытия расположена над верхней частью документа (то есть над пикселем 0), но также кнопка перезагрузки означает, что нажатие кнопки перезагрузки также приведет к отрицательное значение для clientY / pageY .

Переход по пути проверки x координаты события также проблематичен, поскольку кнопка закрытия браузера не всегда находится в правой части окна (например, она находится слева в OS X) и потому, что окно можно закрыть закрыв вкладку или с помощью клавиатуры.




Я просто попробовал это, и он решил проблему: создайте объект sessionStorage, который будет уничтожен, когда пользователь закроет браузер. Мы можем проверить объект sessionStorage, чтобы узнать, закрыл ли пользователь браузер или обновил страницу (объект sessionStorage не будет уничтожен при обновлении страницы).




Есть решение.

Я хотел отключить пользователя на сервере, когда окно вкладки или браузера было закрыто, но не тогда, когда страница была перезагружена (вы можете различать события перезагрузки / закрытия для другой цели, но вы можете воспользоваться моим решением). В результате я получил следующий процесс, основанный на локальном хранилище HTML5 и клиентской / серверной AJAX-связи:

  1. на вашей странице добавьте onunload к window следующему обработчику (псевдо-javascript):

    function myUnload(event) {
        if (window.localStorage) {
            // flag the page as being unloading
            window.localStorage['myUnloadEventFlag']=new Date().getTime();
        }
    
        // notify the server that we want to disconnect the user in a few seconds (I used 5 seconds)
        askServerToDisconnectUserInAFewSeconds(); // synchronous AJAX call
    }
    
  2. на вашей странице добавьте onload на body к следующему обработчику (псевдо-javascript):

    function myLoad(event) {
        if (window.localStorage) {
            var t0 = Number(window.localStorage['myUnloadEventFlag']);
            if (isNaN(t0)) t0=0;
            var t1=new Date().getTime();
            var duration=t1-t0;
            if (duration<10*1000) {
                // less than 10 seconds since the previous Unload event => it's a browser reload (so cancel the disconnection request)
                askServerToCancelDisconnectionRequest(); // asynchronous AJAX call
            } else {
                // last unload event was for a tab/window close => do whatever you want (I do nothing here)
            }
        }
    } 
    
  3. на сервере, собрать запросы на разъединение в списке и установить поток таймера, который проверяет список через равные промежутки времени (я использовал каждые 20 секунд). После истечения времени ожидания отключения (т. Е. 5 секунд) отключите пользователя от сервера. Если в это время принимается отмена запроса на разъединение, соответствующий запрос на разъединение удаляется из списка, так что пользователь не будет отключен.

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

Обратите внимание, что я использую событие unload вместо события beforeUnload чтобы правильно управлять ссылками на вложения: когда пользователь нажимает ссылку на вложение (например, файл PDF), beforeUnload событие beforeUnload , затем всплывающее сообщение open / save (браузер не изменяет отображаемую страницу и не отправляет событие unload ). Если я использовал событие beforeUnload (как и раньше), я бы обнаружил изменение страницы, когда его нет.

Этот подход ограничен браузерами, поддерживающими локальное хранилище HTML5, поэтому вы, вероятно, будете использовать определенные подходы для старых браузеров, таких как MSIE7.

Другие подходы, основанные на event.clientY , не являются надежными, поскольку это значение отрицательно при нажатии на кнопки перезагрузки или закрытия вкладки / окна и положительное, когда сочетания клавиш используются для перезагрузки (например, F5, Ctrl-R, ...) и закрытие окна (например, Alt-F4). Опора на положение X также не надежна, потому что кнопки не размещаются в одном месте в каждом браузере (например, кнопка закрытия слева).




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

Подумав о том, что может помочь разглядеть между обновлением и закрытием, куки пришли мне в голову. Я помню, что настройка cookie без явной даты истечения срока действия делает его доступным только для текущего сеанса. И текущая сессия явно действует до закрытия браузера. Это не включает закрытие вкладки, но моя проблема заключалась в аутентификации пользователя, и я не хотел выходить из системы только для закрытия вкладки (я думаю, что это тот же подход, что и ASPXAUTH файл cookie ASP.NET).

Итак, я поставил простой файл cookie в коллекции document.cookies когда пользователь вошел в систему и проверил его при загрузке страницы: если файл cookie все еще был там, он был обновлен или повторно открыт, а пользовательские данные были сохранены, если cookie не присутствовал, сеанс был истек, поэтому данные пользователя были очищены (так же, как явный выход из системы).

Надеюсь, этот подход может быть полезен кому-то еще!




Его рабочее решение

export class BootstrapComponent implements OnInit {

  validNavigation = 0;

  constructor(
    private auth: AuthenticationService
  ) { }

  ngOnInit() {
    const self = this;
    self.registerDOMEvents();
  }

  registerDOMEvents() {
    const self = this;
    window.addEventListener('unload', () => {
      if (self.validNavigation === 0) {
        self.endSession();
      }
    });
    document.addEventListener('keydown', (e) => {
      const key = e.which || e.keyCode;
      if (key === 116) {
        self.validNavigation = 1;
      }
    });
  }

  endSession() {
    const self = this;
    self.auth.clearStorage();
  }
}



Я должен просить, чтобы они отличались теми ответами, которые говорят, чтобы избежать отключения автоматического завершения.

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

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







javascript browser