Not able to show alert onpopstate

Question

I've implemented an online test module, in which I wanted to alert the user and take user confirmation for the browser back button action. But somehow I'm not able to achieve this. Below is the code that I'm trying:

$(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";
                    }
                });
            }
        }
    });

EDIT: I tried changing the code and it worked but now alert is showing on every page load. How can I prevent popping alert on page load? Below is the code that I've changed:

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";
                    }
                });
            }
        }

I took this code reference from here. With code in this answer, I'm not able to alert the user. Can please someone tell me where I'm going wrong? Or how can I achieve this functionality? Any help is appreciated.

Answer 1

I tried to manage the alert using the code below. It did worked somehow after a few research. If it is wrong please correct me. Below is the code that worked for me:

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";
                }
            });
        }
        }
    }