Как правильно отследить событие закрытия вкладки?

Question

[iNeedHelp]

Здравствуйте. Мне нужно выполнить некоторую функцию при закрытии страницы. Как мне отследить событие? Пробовал так:

window.onUnload = function() {
  alert('hello');
  return 'hello';
}

window.onbeforeunload = function() {
  alert('hello');
  return 'hello';
}

Оба способа не работают. Как исправить?

Answer 1

[Денис]

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

не получится, на 99.999% уверен

, а я, пожалуй, использую оставшиеся 0.001% )) Для теста, создайте html-документ, в который запишите следующий JS-код:

window.addEventListener('beforeunload', function (e) {
	var xhr = new XMLHttpRequest();
		xhr.open('POST', 'handler.php', true);
		xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
		xhr.send( 'key=' + encodeURIComponent('Hi') );
 
    e.preventDefault();
    var confirmationMessage = "";
    (e || window.event).returnValue = confirmationMessage;
    return confirmationMessage;
}, false);

И еще один PHP-файл "handler.php" в той же директории, в котором запишем:

<?php
if (!empty($_POST['key'])) {
	file_put_contents('test.txt', $_POST['key']);
}

Теперь откроем и закроем html-файл в любом браузере, кроме осла восьмой версии и ниже. Просто потому, что объект XMLHttpRequest в них не поддерживается, а кроссбраузерное решение нам для теста и не нужно. Результат можем наблюдать в создавшемся файле test.txt

Comments

[gleendo]

Денис Хоть кто то воспользовался моих остатком процента)))
А можно поинтересоваться что произошло при выполнение сие кода? Просто php ваще не бум бум.
В общих чертах понял что отправляется запрос, бла бла, дальше в php проверяем если запрос "не пустой", ну что то в этом роде, то записываем в файл Hi. Вроде так, а может и не так, зх)))

И что это даст? не пойму просто как это поможет вызвать например какую нибудь функцию перед закрытием страницы?

И для чего вот эти строки?

e.preventDefault();
var confirmationMessage = "";
(e || window.event).returnValue = confirmationMessage;
return confirmationMessage;

Какой в них смысл? Как я понял, эти строки отменяют обработку по умолчанию, а потом все равно возвращаем значение, при чем false.

Объясните пожалуйста ваш код, хочется понять что вы сделали и как что и для чего работает

[Денис]

evg_ как я заметил в начале ответа - "Смотря, что вы (в данном случае ТС) хотите сделать". Да, далеко не всё, но некоторые вещи, однако, допустимы. Вот, в качестве одного из таких случаев, я и привел пример выше. Это к вопросу о том, чем это может помочь. Что хочет сделать ТС - пока остаётся загадкой. По поводу некоторых участков кода - не вижу смысла копипастиь, поэтому даю ссылочку на описание. Но если коротко, то это "рудимент", оставшийся со времён, когда можно было в диалоговое окно свой текст (сейчас только стандартное "вшитое" сообщение), но который и даёт пару миллисекунд, в течение которых можно выполнить те немногие действия перед закрытием окна/вкладки браузера.

[iNeedHelp]

действительно. На клиенте вполне можно отослать AJAX при закрытии, а мне это как раз и нужно было. Спасибо

Answer 2

[gleendo]

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

window.onbeforeunload = function() {
  return 'Some string';
}

Не работает из за безопасности.

Comments

[iNeedHelp]

хм, действительно. В Firefox всё работает, а в другом браузере - нет. Спасибо