Когда мы обновляем страницу (F5 или значок в браузере), сначала будет триггерное событие ONUNLOAD. Когда мы закроем браузер (значок справа от X), он будет запускать событие ONUNLOAD. Теперь, когда запускается событие ONUNLOAD, нет возможности различать обновление страницы или закрытие браузера. Если у вас есть решение, то дайте мне.Идентификация между обновлением и закрытием действий браузера
<html>
<body onunload="doUnload()">
<script>
function doUnload(){
if (window.event.clientX < 0 && window.event.clientY < 0){
alert("Window closed");
}
else{
alert("Window refreshed");
}
}
</script>
</body>
</html>
Работает ли он во всех браузерах? пожалуйста, дайте мне некоторые комментарии. –
Спасибо, друг, но ваш код не работает в браузере FF, поэтому, пожалуйста, предложите мне еще один ответ. –
смотрите другой ответ. он должен работать на вас. если он работает, отметьте ответ как правильный, чтобы другие знали. –
Мое раннее решение работало для меня в 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>
thanks Liv 1, я пробовал этот код, но он не работает должным образом в Firefox, в этой проблеме возникает, когда Tab закрыт и кнопка обновления нажата. Если у вас есть другое решение, то дайте мне пожалуйста. –
@renegadeMind, это сработало для вас? –
Этот метод не может быть использован для надежного определения того, было ли закрыто окно браузера. –
К сожалению контролирует значение события clientY/pageY, как это было предложено несколько ответов здесь, является не является надежным способом определить, запускается ли событие unload вследствие того, что пользователь закрыл страницу.
Причина clientY/pageY отрицателен при нажатии кнопки закрытия браузера, потому что кнопка закрытия находится над верхней частью документа (т.е. выше пиксель 0), но так это кнопка перезагрузки значение, что при нажатии на кнопке перезагрузки также приведет к отрицательному значению для clientY/pageY.
Переход по пути проверки координаты x события также проблематичен, поскольку кнопка закрытия браузера не всегда находится в правой части окна (например, она находится слева в OS X) и потому, что окно можно закрыть, закрыв вкладку или с помощью клавиатуры.
Существует решение.
Я хотел отключить пользователя на сервере, когда закрыта вкладка или окно браузера, но не при перезагрузке страницы (вы можете различать события перезагрузки/закрытия для другой цели, но вы можете воспользоваться моим решением). Я в конечном итоге с помощью следующего процесса, на основании местного хранения и клиент/AJAX сервер связи в HTML5:
на вашей странице, добавьте 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
}
на вашей странице, добавьте 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)
}
}
}
на сервере, собирайте запросы на разъединение в списке и задайте поток таймера, который проверяет список через равные промежутки времени (я использовал каждые 20 секунд). После истечения времени ожидания отключения (т. Е. 5 секунд) отключите пользователя от сервера. Если в это время принимается отмена запроса на разъединение, соответствующий запрос на разъединение удаляется из списка, так что пользователь не будет отключен.
Этот подход также применим, если вы хотите различать событие закрытия вкладки/окна и следующие ссылки или представленную форму. Вам просто нужно разместить два обработчика событий на каждой странице, содержащей ссылки и формы, и на каждой целевой странице ссылки/формы.
Обратите внимание, что я использую unload событие вместо beforeUnload события для того, чтобы управлять ссылки на вложения правильно: когда пользователь нажимает на ссылку на вложение (например, файл PDF), то beforeUnload отправляется событие, затем открытый/save popup, и ничего больше (браузер не изменяет отображаемую страницу и не отправляет событие unload). Если бы я использовал событие beforeUnload (как и раньше), я бы обнаружил изменение страницы, когда его нет.
Этот подход ограничен браузерами, поддерживающими локальное хранилище HTML5, поэтому вы, вероятно, будете использовать определенные подходы для старых браузеров, таких как MSIE7.
Другие подходы, основанные на event.clientY, не являются надежными, поскольку это значение отрицательно при нажатии на кнопки перезагрузки или закрытия вкладки/окна и положительное, если для перезагрузки используются быстрые клавиши (например, F5, Ctrl-R, ...) и закрытие окна (например, Alt-F4). Опора на позицию X также не надежна, потому что кнопки не размещаются в одной позиции в каждом браузере (например, кнопка закрытия слева).
Я бы использовал 'sessionStorage' вместо' localStorage', так как вы просто отслеживаете перезагрузки, нет причин для его сохранения. –
Вот ответ, как обнаружить перезагрузку страницы через HTML5 api в браузерах MODERN (работает для меня): https://stackoverflow.com/questions/5004978/check-if-page-gets-reloaded-or-refreshed-in -javascript –
@RajabShakirov этот ответ не применяется для обнаружения обновления во время события разгрузки. – cdonner
Используйте событие window.onbeforeunload для случая, чтобы перейти от страницы, но он будет содержать обновляющие или привязывающие теги .... используйте флаг проверки для того же самого, 1 пример для процесса - это проверка URL-адреса (Initial 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://stackoverflow.com">StackOverflow</a></p>
</body>
</html>
Этот код не работает, когда пользователь нажимает на браузер, ссылается на кнопку или обратно. – SwR
Я просто попытался это и решить вопрос: Создать объект sessionStorage который будет разрушаться, когда пользователь закрывает браузер. Мы можем проверить объект sessionStorage, чтобы узнать, закрыл ли пользователь браузер или обновил страницу (объект sessionStorage не будет уничтожен при обновлении страницы).
Этот ответ требует кода. В Chrome 56 sessionStorage.getItem() работает нормально при прослушивании onunload, когда пользователь закрывает браузер. –
установка объекта localStorage работала для меня даже в более старой версии IE –
$(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');
}
});
}
Использовать, если (окно) определяет, закрыто или просто перезагружено. работая для меня.
В объекте Chrome 56 window определяется в onunload-слушателе, когда пользователь закрывает браузер –
Сегодня у меня была такая же проблема, и я нашел возможное решение, которое хочу поделиться с вами.
Если подумать о том, что может помочь различить между обновлением и закрытием, мне пришло в голову куки. Я помню, что настройка cookie без явной даты истечения срока действия делает его доступным только для текущего сеанса. И текущая сессия явно действует до закрытия браузера. Это не включает закрытие вкладки, но моя проблема заключалась в аутентификации пользователя, и я не хотел выходить из системы только для закрытия вкладки (я думаю, что это тот же подход, что и файл cookie ASPXAUTH ASP.NET).
Итак, я установил простой файл cookie в коллекцию document.cookies, когда пользователь вошел в систему и проверил его при загрузке страницы: если файл cookie все еще был там, это было обновление или повторно открытая вкладка, и пользовательские данные сохранялись, если cookie не присутствовал сеанс истек, поэтому пользовательские данные были очищены (так же, как явный выход из системы).
Надеюсь, что этот подход может быть полезен кому-то еще!
См. Также похожие вопросы: http://stackoverflow.com/questions/4387212/differentiate-between-f5-and-browser-close-event-in-flex-actionscript и http://stackoverflow.com/questions/1631959/browser-window-close-event –
Вот ответ, как обнаружить перезагрузку страницы через HTML5 api в браузерах MODERN (работает для меня): https://stackoverflow.com/questions/5004978/check-if-page -gets-reloaded-or-refreshed-in-javascript –