无法显示警报 onpopstate

Question

我已经实现了一个在线测试模块，我想在其中提醒用户并让用户确认浏览器后退按钮操作。但不知何故我无法实现这一目标。下面是我正在尝试的代码：

$(function() {
        window.history.pushState({
            page: 1
        }, "", "");
        history.back();
        history.forward();
        window.onpopstate = function(event) {
            if (event) {
                e.preventDefault(); // I entered this just in thought to stop the loading of page so that my alert will be displayed, but it failed
                swal.fire({
                    title: 'This action will terminate your ongoing test and you won\'t be able to attempt the test',
                    text: "Do you still want to continue",
                    type: "warning",
                    showCancelButton: true,
                    confirmButtonText: 'Yes',
                    cancelButtonText: 'No',
                    allowOutsideClick: false
                }).then((result) => {
                    if (result.dismiss != 'cancel') {
                        window.location.href = "tests.php";
                    }
                });
            }
        }
    });

编辑： 我尝试更改代码并且它起作用了，但现在 alert 显示在每个页面加载上。如何防止在页面加载时弹出警报？以下是我更改的代码：

window.history.pushState({
            page: 0
        }, "", "");
        history.back();
        window.onpopstate = function(event) {
            history.forward();
            if (event) {
                event.preventDefault();
                swal.fire({
                    title: 'This action will terminate your ongoing test and you won\'t be able to attempt the test',
                    text: "Do you still want to continue",
                    type: "warning",
                    showCancelButton: true,
                    confirmButtonText: 'Yes',
                    cancelButtonText: 'No',
                    allowOutsideClick: false
                }).then((result) => {
                    if (result.dismiss != 'cancel') {
                        window.location.href = "tests.php";
                    }
                });
            }
        }

我从 here 中获取了这段代码参考。使用此答案中的代码，我无法 alert 用户。可以请有人告诉我我要去哪里错了吗？或者我怎样才能实现这个功能？感谢任何帮助。

Answer 1

我尝试使用下面的代码来管理 alert。经过一些研究，它确实以某种方式起作用。如果说错了请指正。以下是对我有用的代码：

window.history.pushState({
        page: 0
    }, "", "");
    history.back();
    $(document).on('load', function()) {
    window.onpopstate = function(event) {
        history.forward();
        if (event) {
            event.preventDefault();
            swal.fire({
                title: 'This action will terminate your ongoing test and you won\'t be able to attempt the test',
                text: "Do you still want to continue",
                type: "warning",
                showCancelButton: true,
                confirmButtonText: 'Yes',
                cancelButtonText: 'No',
                allowOutsideClick: false
            }).then((result) => {
                if (result.dismiss != 'cancel') {
                    window.location.href = "tests.php";
                }
            });
        }
        }
    }

无法显示警报 onpopstate

Not able to show alert onpopstate

jquery

cross-browser

back-button