浏览器后退按钮上的确认框

Question

我想在浏览器的后退或刷新按钮上捕捉事件。我没有找到任何完美的解决方案，它只捕获返回事件并且与所有浏览器兼容。请提供一些解决方案。

提前致谢。

Answer 1

您可以使用 HTML5 历史记录 API 中的事件处理程序 onpopstate，如下所示：

$(document).ready(function() {

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

$(window).on('popstate', function() {
  //confirmation box
  confirm('Back button clicked!');
});
 }
});

请注意，您需要有一个页面才能返回...

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) {
                //document.location.href = "logOff.htm";
                setTimeout(function(){  var answer = confirm("Are you Sure?? This will expire your session");
                if(answer == true)
                    {
                    document.location.href = "logOff.htm";  
                    }
                },100 );


                //alert('Browser Back or Forward button was pressed.');
            }
            if (window.onBrowserHistoryButtonClicked) {

                window.onBrowserHistoryButtonClicked();
            }
        });
    }
});

浏览器后退按钮上的确认框

Confirm box on browser back button

javascript

jquery

back-button