javascript - работает - jquery изменить title страницы



Как я могу обработать событие закрытия вкладки браузера в Angular? Только близко, а не покушать (4)

Моя цель - удалить пользовательские куки, когда вкладка браузера закрыта.

Является ли это возможным? Могу ли я обработать событие закрытия вкладки браузера без обновления?

Если я использую beforeunload или unload , функция запускается, когда пользователь обновляет страницу, я не хочу этого, я хочу просто запускать при закрытой вкладке.

Как я могу сделать это в Angular?

https://src-bin.com


Answer #1

Если ваша цель - удалить куки при закрытии браузера, не устанавливайте срок действия. Файлы cookie без истечения срока действия удаляются при закрытии браузера.

Вы действительно никогда не должны знать, закрывает ли пользователь свой браузер или нет. Я уверен, что есть альтернативные способы достичь того, что вы хотите сделать.

Суть:

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


Answer #2

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

Простая часть: известно, что окно разрушается. Вы можете использовать onunload события onunload чтобы обнаружить это.

Сложная часть:

Обнаружение, является ли это обновлением, переходом по ссылке или желаемым событием закрытия окна. Удаление ссылки следует и формы представления достаточно легко:

var inFormOrLink;
$('a').live('click', function() { inFormOrLink = true; });
$('form').bind('submit', function() { inFormOrLink = true; });

$(window).bind('beforeunload', function(eventObject) {
    var returnValue = undefined;
    if (! inFormOrLink) {
        returnValue = "Do you really want to close?";
    }
    eventObject.returnValue = returnValue;
    return returnValue;
}); 

Решение для бедняков

Проверка event.clientY или event.clientX чтобы определить, что было event.clientX чтобы запустить событие.

function doUnload(){
 if (window.event.clientX < 0 && window.event.clientY < 0){
   alert("Window closed");
 }
 else{
   alert("Window refreshed");
 }
}

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

Включенное решение

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

На вашей странице добавьте onunload в окно к следующему обработчику

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
}

Затем добавьте тело к следующему обработчику

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

На сервере соберите запросы на отключение в списке и установите поток таймера, который проверяет список через регулярные промежутки времени (я использовал каждые 20 секунд). По истечении времени ожидания запроса на отключение (т. Е. 5 секунд прошло) отключите пользователя от сервера. Если за это время получен запрос на отключение, соответствующий запрос на отключение удаляется из списка, чтобы пользователь не был отключен.

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

Заключительные комментарии (каламбур):

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


Answer #3

Я знаю, что прошло много времени с тех пор, как был задан этот вопрос, но я подумал, что тоже смогу дать ответ. Наилучшим способом перезагрузки страницы без потери куки и удаления куки при закрытии окна или вкладки было использование ng-keydown для просмотра нажатия клавиши F5 (KeyCode 116).

HTML

<body ng-controller="exitController" ng-keydown="isRefresh($event)">

КОНТРОЛЛЕР

yourApp.controller('exitController', ['$rootScope', '$scope', '$window', '$cookies', function($rootScope, $scope, $window, $cookies) {
//set refresh to false to start out, it will become true only when we hit the refresh page
$scope.refresh = false;

//This is where we'll actually clear our cookies in the event of a window close
$scope.clearCookies = function() {
    $cookies.remove('sessionData');
    $cookies.remove('ss-id');
    $cookies.remove('ss-pid');
};

//When the user types any key, it will be assessed.
$scope.isRefresh = function(e) {
    var keyCode = e.keyCode; //find the key that was just pressed
    if(keyCode === 116) { //if the key that was pressed is F5, then we know it was a refresh
        $scope.refresh = true;
    }
}

//event that handles all refresh requests
window.onbeforeunload = function (e) {
    if (!$scope.refresh) { //as long as the trigger for the refresh wasnt initiated by F5, we remove the cookies
        $scope.clearCookies();
    }
};

}]);


Answer #4
$window.addEventListener("beforeunload", function (e) {
  var confirmationMessage = "\o/";
  console.log("closing the tab so do your small interval actions here like cookie removal etc but you cannot stop customer from closing");
  (e || window.event).returnValue = confirmationMessage; //Gecko + IE
  return confirmationMessage;                            //Webkit, Safari, Chrome
});

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

JavaScript обнаруживает браузер закрыть вкладку / закрыть браузер

Обновление: я исследовал эту проблему вместе с некоторыми рекомендациями. И помимо этого вышеупомянутого варианта, лучший способ справиться с такими случаями - это создать сеансы без времени ожидания активности, которое может составлять 25-30 минут. Конвертируйте все ваши куки, которые нужно уничтожить, в сеансы с тайм-аутом. В качестве альтернативы, вы можете установить срок действия куки, но тогда куки останутся в браузере до следующего входа в систему. Менее 25-30 минут бездействия сеанса не являются полностью надежными, поскольку вы можете выйти из системы, если клиент не использует браузер в течение 10-15 минут. Я даже пытался захватывать события из событий на основе ссылок (<a>) или (< submit >) или ( keypress ). Проблема в том, что он хорошо справляется с обновлением страницы. Но это не устраняет проблему закрытия клиентом браузера или вкладки браузера перед удалением файлов cookie. Это то, что вы должны рассмотреть в вашем случае использования и принудительно компромисс из-за отсутствия контроля над ним. Лучше изменить дизайн в зависимости от его архитектуры, чтобы лучше, чем сталкиваться с упомянутыми проблемами позже.





cookies