点击浏览器后退按钮时如何调用事件

Question

如何在单页应用程序中使用 ASP.NET MVC，当用户单击浏览器的返回按钮时调用 jQuery 事件。我想要在用户按下浏览器的后退按钮时显示一个确认框来离开屏幕。如何在浏览器后退按钮上调用 jQuery 函数。请帮助我。我已经搜索并找到了推送状态事件，但我不知道如何在上述情况中使用它。

- Ankit Sahrawat

---

可能是JS或Jquery浏览器后退按钮点击检测器的重复问题。 - Manwal

请查看此链接：http://www.webdevelopmenthelp.net/2013/12/browser-back-button-click-event.html - Rakesh Shetty

你可以使用jQuery的unload方法。 $( window ).unload(function() { alert( "Handler for .unload() called." ); }); - Finoy Francis

Answer 1

jQuery(document).ready(function($) {

  if (window.history && window.history.pushState) {

    window.history.pushState('forward', null, './#forward');

    $(window).on('popstate', function() {
      alert('Back button was pressed.');
    });

  }
});

JavaScript或jQuery浏览器后退按钮点击检测器

- Charles-Antoine Fournel

---

这段代码即使我点击锚点并且在页面首次加载时也会显示警报。我希望它只在浏览器的后退按钮上执行。 - Ankit Sahrawat

窗口历史检查在此处用于确定是否已经加载了新页面。如果没有，window.history 为 null，您无法触发警报消息。您可能在 JS 脚本中有错误，请从浏览器中检查 JavaScript 控制台。 - Charles-Antoine Fournel

Answer 2

window.userInteractionTimeout = null;
window.userInteractionInHTMLArea = false;
window.onBrowserHistoryButtonClicked = null; // This will be your event handler for browser navigation buttons clicked

$(document).ready(function () {
    $(document).mousedown(function () {
        clearTimeout(window.userInteractionTimeout);
        window.userInteractionInHTMLArea = true;
        window.userInteractionTimeout = setTimeout(function () {
            window.userInteractionInHTMLArea = false;
        }, 500);
    });

$(document).keydown(function () {
        clearTimeout(window.userInteractionTimeout);
        window.userInteractionInHTMLArea = true;
        window.userInteractionTimeout = setTimeout(function () {
            window.userInteractionInHTMLArea = false;
        }, 500);
    });

    if (window.history && window.history.pushState) {
        $(window).on('popstate', function () {
            if (!window.userInteractionInHTMLArea) {
                // alert('Browser Back or Forward button was pressed.');
                 }
    if(window.onBrowserHistoryButtonClicked ){
    window.onBrowserHistoryButtonClicked ();
            }
        });
    }
});

- Varun

---

这对我没有用...也没有任何错误提示 :( - Simone