Я добавляю диалог «Подтвердить, что вы хотите покинуть» на мой веб-сайт, и я наблюдаю странное поведение события onbeforeunload.
Документы довольно ясны: если ваша страница собирается быть выгруженной, вызывается это событие. Когда ваш eventHandler возвращает строку, у пользователя запрашивается подтверждение. В зависимости от браузера, строка может отображаться для него.
Но на небольшом примере веб-сайта я заметил, что 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>
Когда окно загружено, текст абзаца изменяется и регистрируется eventHandler для beforeunload. Если я загружу это в Firefox, параграф будет немедленно изменен.
Но если я закрою вкладку или перезагрузлю ее, подтверждение не запрашивается. Диалог подтверждения отображается только в том случае, если я нажал на веб-сайте. Переключение вкладок назад и вперед недостаточно, ожидания около 10 с недостаточно.
Поведение такое же в хроме.
Когда я нажимаю на веб-сайте, всегда запрашивается подтверждение. Я могу выделить другую вкладку и закрыть этот пример (щелкнув правой кнопкой мыши и «закрыть вкладку»), он запросит подтверждение. Или другая вкладка сфокусирована, и я пытаюсь закрыть браузер, он запрашивает подтверждение.
Что здесь происходит, как я могу убедиться, что событие всегда запускается перед выгрузкой сайта?
Вот видео:
