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

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

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 2

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

这会对你有帮助。

DEMO

Answer 3

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

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

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

Answer 4

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

我只是通过添加状态来解决它，如果它是null。我还会在回去之前清理听众。

    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

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

Answer 6

试试这个，

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

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

6 个答案: