Я добавляю на свой веб-сайт диалоговое окно «Подтвердите, что хотите уйти» и наблюдаю странное поведение события onbeforeunload.
документы достаточно ясны: если ваша страница вот-вот быть выгруженным, это событие вызывается. Когда ваш обработчик событий возвращает строку, у пользователя запрашивается подтверждение. В зависимости от браузера строка может отображаться ему.
Но на небольшом примере веб-сайта я заметил, что beforeunload на самом деле срабатывает только в том случае, если пользователь каким-то образом взаимодействует с веб-сайтом. Это моя тестовая установка:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<script type="text/javascript">
window.onload = function () {
$("#placeholder").text("website loaded")
window.onbeforeunload = function () {
return "Reloading the page will reset the survey!";
}
}
</script>
</head>
<body>
<p id='placeholder'></p>
</body>
</html>
При загрузке окна текст абзаца изменяется и регистрируется обработчик событий для beforeunload. Если я загружу это в Firefox, абзац сразу изменится.
Но если я закрою вкладку или перезагружу ее, подтверждения не запрашивается. Диалоговое окно подтверждения отображается только в том случае, если я нажал на веб-сайте. Переключать вкладки туда и обратно недостаточно, ждать около 10 секунд недостаточно.
В хроме такое же поведение.
После того, как я нажал на веб-сайт, всегда запрашивается подтверждение. Я могу сфокусировать другую вкладку и закрыть этот пример (щелкнув правой кнопкой мыши и «закрыть вкладку»), он запрашивает подтверждение. Либо другая вкладка сфокусирована и я пытаюсь закрыть браузер, он просит подтверждения.
Что здесь происходит, как я могу убедиться, что событие всегда срабатывает до выгрузки сайта?
Вот видео: 
