如何在 JS/Jquery 中检测用户是否按下浏览器的后退/前进箭头以实现非 SPA

Question

我只有2条路线

/

和

/about

当我访问 URL 时

localhost:8080 -> it renders my home page
localhost:8080/about -> it renders about page 

如果用户打开主页并单击“关于”按钮并转到“关于”页面，而不是如果用户单击浏览器的后退按钮，我只想提醒“用户单击浏览器按钮”

我尝试了很多互联网解决方案，但都不起作用 尝试过这个但不起作用。

$(window).on('popstate', function(event) {
  alert("You are going to back page. Can work that?");
});

Answer 1

您可以使用网址比较。

$(document).ready(function () {
    // Store the initial URL when the page loads
    var initialUrl = window.location.href;

    // Listen for beforeunload event
    $(window).on('beforeunload', function () {
        // Compare the current URL with the initial URL
        if (window.location.href !== initialUrl) {
            // Display alert if the user is navigating away
            return 'You are going to a different page. Are you sure you want to leave?';
        }
    });
});

Answer 2

popstate

是为 SPA 设计的，IOW：页面路由上的 SPA 将执行

pushstate

.. 您不会从非 SPA 应用程序中获得

popstate

。

链接 -> https://developer.mozilla.org/en-US/docs/Web/API/PopStateEvent

注意：每次活动历史条目在同一文档的两个历史条目之间发生变化时，都会将 popstate 事件分派到窗口。

请注意 ->

same document

，IOW：如果您在不使用 Pushstate 的情况下导航到 about，那么它不是同一个文档。

SPA 的工作原理是这样的 ->

1. 使用新 URL 推送状态
2. 加载新 URL 的 DOM 内容。

后退按钮已按下

3. popstate 已触发，加载新 URL 的内容

所以你可以使用 jQuery 来做到这一点，通常用户所做的就是拦截

a

标签，使用

preventDefault

并执行上面的 1,2。

注意：可以使用 beforeunload，但要注意它的同步性和非常糟糕的用户体验，特别是使用警报。因此，如果你能让push/popstate正常工作，你会发现你可以为用户创建更好的用户体验。例如。就像能够使用新的 HTML 对话框元素 -> https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog