Как работают события «beforeunload» и «unload»?

1

Как я правильно понял, когда пользователь закрывает вкладку или нажимает на ссылку или даже обновляет страницу "beforeunload", а затем запускаются события "разгрузки". Во-первых, я не могу зарегистрировать обработчик событий (некоторые фрагменты кода не работают):

  1. Из примера веб-документов MDN я написал следующее:

    window.addEventListener("beforeunload", function (event) {
         event.preventDefault();
         event.returnValue("Are you sure?");
    });
    

    и он не работает (я ожидал появления диалога)

  2. Также я пробовал это:

    window.addEventListener("beforeunload", function (event) {
         return "Are you sure?";
    });
    

    и это не работает

  3. Из документов w3school я написал:

    window.onbeforeunload = function () {
         return "Are you sure?";
    }
    

    и это работает! Но почему предыдущий не работает?

Как насчет запуска браузера или закрытия вкладок? Возможно ли "выполнять некоторые операции", когда пользователь закрывает вкладку или браузер? Чтобы быть более ясным, я хочу удалить несколько файлов cookie, которые относятся к его текущему сеансу, когда пользователь закрывает вкладку или браузер. Или мне нужно сделать что-то подобное?

window._link_was_clicked = false;
window.onbeforeunload = function(event) {
  if (window._link_was_clicked) {
    return; // abort beforeunload
  }
  // your event handling
};

jQuery(document).on('click', 'a', function(event) {
  window._link_was_clicked = true;
});

Вот полный демо-код, который я написал:

<!DOCTYPE html>
<html lang="en" ng-app="app">

    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>

        <script src="/angular.min.js"></script>
        <script>
            angular
                .module("app", [])
                .controller("Controller", function ($scope) {
                    $scope.username = localStorage.getItem("username") || "";
                    $scope.setCookie = function () {
                        console.log("Set Cookie");
                        localStorage.setItem("username", "Denys");
                        $scope.username = localStorage.getItem("username");
                    }
                    $scope.deleteCookie = function () {
                        console.log("Delete Cookie");
                        localStorage.removeItem("username");
                        $scope.username = localStorage.getItem("username") || "";
                    }
                })
                .run(function () {
                    console.log("run()");
                    window.addEventListener("beforeunload", function (event) {
                        event.preventDefault();
                        event.returnValue("Are you sure?");
                        return "Are you sure?";
                    });
                    window.addEventListener("unload", function (event) {
                        localStorage.removeItem("username");
                    });
                    window.onbeforeunload = function () {
                        return "Are you sure?";
                    }
                });
        </script>
    </head>

    <body ng-controller="Controller">
        <h1>Hello!</h1>
        <p ng-if="username">{{username}}</p>
        <p>
            <button ng-click="setCookie()">Set Cookie</button>
            <button ng-click="deleteCookie()">Delete Cookie</button>
        </p>
    </body>

</html>
  • 0
    Понимаете ли вы, что более чем закрытие вкладок запускает эти события?
Теги:

1 ответ

0

Вы добавили круглые скобки в первом, даже если в документации MDN нет: Изображение 174551

Событие также должно срабатывать, если вкладка закрыта.

Если вы установили правильность срока действия cookie, вы можете сделать это, чтобы они автоматически удалялись.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню