浏览器后退按钮单击确认框

Question

需要在点击浏览器后退按钮时创建 javascript 确认弹出窗口。如果我点击后退按钮，会弹出“你想继续吗？”如果点击是，那么它会重定向到上一页。

我有以下代码，它没有按要求工作。

if(window.history && history.pushState){ // check for history api support
        window.addEventListener('load', function(){

            // create history states
            history.pushState(-1, null); // back state
            history.pushState(0, null); // main state
            history.pushState(1, null); // forward state
            history.go(-1); // start in main state

            this.addEventListener('popstate', function(event, state){
                // check history state and fire custom events
                if(state = event.state){

                    event = document.createEvent('Event');
                    event.initEvent(state > 0 ? 'next' : 'previous', true, true);
                    this.dispatchEvent(event);

                    var r = confirm("Would you like to save this draft?");
                    if(r==true) { 
                        // Do nothing      

                    } else {  
                       self.location = document.referrer;    
                    }
                    // reset state
                    history.go(-state);

                }
            }, false);
        }, false);
    }

在这方面的任何帮助都将是非常可观的。

Answer 1

/* Prevent accidental back navigation click */
history.pushState(null, document.title, location.href);
window.addEventListener('popstate', function (event)
{
    const leavePage = confirm("you want to go ahead ?");
    if (leavePage) {
        history.back(); 
    } else {
        history.pushState(null, document.title, location.href);
    }  
});

Answer 2

试试这个：它很简单，您可以完全控制后退按钮。

if (window.history && history.pushState) {
    addEventListener('load', function() {
        history.pushState(null, null, null); // creates new history entry with same URL
        addEventListener('popstate', function() {
            var stayOnPage = confirm("Would you like to save this draft?");
            if (!stayOnPage) {
                history.back() 
            } else {
                history.pushState(null, null, null);
            }
        });    
    });
}

Answer 3

window.onbeforeunload = function() {
    return "Leaving this page will reset the wizard";
};

这会对你有所帮助。

DEMO

Answer 4

Robert Moore 的解决方案在为我刷新页面时导致了重复事件。大概是因为状态会被重新添加多次。

我只在状态为空时才添加状态来解决它。回去之前我也会清理监听器。

    window.onload = function () {
        if (window.history && history.pushState) {
            if (document.location.pathname === "/MyBackSensitivePath") {
                if (history.state == null) {
                    history.pushState({'status': 'ongoing'}, null, null);
                }
                window.onpopstate = function(event) {
                    const endProgress = confirm("This will end your progress, are you sure you want to go back?");
                    if (endProgress) {
                        window.onpopstate = null;
                        history.back();
                    } else {
                        history.pushState(null, null, null);
                    }
                };
            }
        }
    };

MDN 对管理状态有很好的阅读：https://developer.mozilla.org/en-US/docs/Web/API/History_API#The_pushState()_method

Answer 5

当用户试图离开页面时，始终显示一个确认框是可能的。这还包括按下后退按钮。也许这是解决您的问题的合适的快速解决方案？

window.addEventListener('beforeunload', function() {
    return 'You really want to go ahead?';
}); 

http://jsfiddle.net/squarefoo/8SZBN/1/

Answer 6

试试这个，

window.onbeforeunload = function() {
  return "You're leaving the site.";
};
$(document).ready(function() {
  $('a[rel!=ext]').click(function() {
    window.onbeforeunload = null;
  });
});