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

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);
    }

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

score 10 · Accepted Answer

/* 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);
    }  
});

score 8 · Accepted Answer

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

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);
            }
        });    
    });
}

score 3 · Accepted Answer

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

这会对你有所帮助。

演示

score 2 · Accepted Answer

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

score 1 · Accepted Answer

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

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

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

score -1 · Accepted Answer

尝试这个，

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

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

6 回答 6

Related

Reference