在线测试模块中浏览器返回按钮popstate事件弹窗功能异常问题排查

我来帮你梳理代码里的问题，并给出正确的实现方案。

你现有代码的核心问题 #

初始版本的问题 #

1. 不必要的历史栈操作：页面加载时直接调用history.back()和history.forward()，这会立即触发popstate事件，但这不是用户主动点击返回按钮的动作，反而打乱了正常的历史栈逻辑。
2. 变量未定义：e.preventDefault()里的e没有声明，应该是event.preventDefault()，这会导致代码报错，阻止默认行为的逻辑根本没生效。

修改后版本的问题 #

页面加载时执行history.back()，直接触发了popstate事件，所以页面一打开就会弹出提示——这完全不符合你“仅在用户点击返回时触发”的需求。

正确的实现方案 #

核心思路是：通过自定义历史状态标记，区分用户主动返回的动作和页面加载的默认触发，同时维护好历史栈的逻辑，避免误触发。

$(function() {
    // 页面加载时，给当前页面添加一条带自定义标记的历史记录
    window.history.pushState({ isTestSession: true }, "", window.location.href);

    window.onpopstate = function(event) {
        // 仅当触发事件的是我们自定义的测试页面状态时，才执行弹窗逻辑
        if (event.state && event.state.isTestSession) {
            // 阻止默认的后退跳转行为
            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?",
                icon: "warning",
                showCancelButton: true,
                confirmButtonText: 'Yes',
                cancelButtonText: 'No',
                allowOutsideClick: false
            }).then((result) => {
                if (result.isConfirmed) {
                    // 用户确认终止，跳转到测试列表页
                    window.location.href = "tests.php";
                } else {
                    // 用户取消，把当前页面重新加入历史栈，避免再次点击返回直接跳转
                    window.history.pushState({ isTestSession: true }, "", window.location.href);
                }
            });
        }
    };
});

代码关键逻辑说明 #

1. 自定义历史状态：页面加载时用pushState添加一条带isTestSession标记的历史记录，这样用户点击返回按钮时，popstate事件会携带这个标记，我们就能精准识别是用户的返回动作。
2. 区分触发场景：通过event.state && event.state.isTestSession判断，避免页面加载时部分浏览器默认触发popstate导致的误弹窗。
3. 取消后的历史栈修复：用户取消返回后，再次调用pushState把当前页面加回历史栈，这样用户下次点击返回时依然会触发弹窗，而不是直接跳转到上一页。

额外注意事项 #

• pushState本身不会触发popstate事件，只有用户点击浏览器前进/后退按钮，或者通过JS调用history.back()/history.forward()时才会触发，这保证了逻辑的准确性。
• 部分浏览器（比如Safari）在页面加载时可能会触发popstate，所以必须依赖自定义状态标记来过滤掉这类默认触发。

内容的提问来源于stack exchange，提问作者Vaibhav Mandlik