HTML5历史记录禁用前进按钮

Question

我正在使用HTML5 History API编写单页javascript应用程序.应用程序通过Ajax加载内容,并使用屏幕堆栈在内部维护前景屏幕上的状态信息.

我想使用后退按钮启用导航,但我从不想要启用前进按钮.

一些快速的信息:

• 用户应该只能回头,永远不能前进
• 按浏览器后退按钮可关闭用户所在的当前页面屏幕并重新加载上一个屏幕
• Project仅针对最新版本的Chrome,因此其他浏览器实施并不重要
• 我只使用本机JavaScript和jQuery,我想在没有History.js的情况下这样做

当我加载新屏幕时,我运行以下行:

history.pushState(screenData, window.document.title, "#");

我通过jQuery绑定到popstate事件:

$(window).bind("popstate", function(event) {
    if (event.originalEvent.state != null) {
        // Logic that loads the previous screen using my screen stack
    }
}); 

我的应用程序的历史记录管理正在运行,但是当我返回时,启用了前进按钮.我需要弄清楚如何从删除数据history的popstate事件.

我可以用replaceState做这个吗？我不知道怎么做这个......

Answer 1

不好的部分

要真正禁用转发按钮,您必须能够删除浏览器历史记录,这是所有javascript实现都不允许的,因为它允许网站删除整个历史记录,这绝不符合用户的利益.

好的一部分

这有点棘手,但我想如果你想做自定义历史记录它可以工作.您可以pushState在popstate事件中使用,使您的实际页面成为最顶层的历史记录条目.我假设您处理历史的方式,您的窗口永远不会卸载.这允许您自己跟踪用户历史记录:

var customHistory = [];

history.pushState(screenData, window.document.title, "#");像以前一样推送你加载的每一页.只有您将状态添加到自定义历史记录中:

history.pushState(screenData, window.document.title, "#");
customHistory.push({data: screenData, title: window.document.title, location: '#'});

现在,如果您有一个popstate事件,您只需弹出自定义历史记录并将其推送到最顶层的条目:

window.onpopstate = function(e) { 
  var lastEntry = customHistory.pop();
  history.pushState(lastEntry.data, lastEntry.title, lastEntry.location);
  // load the last entry
}

或者在jQuery中

$(window).on('popstate', function(e) {
  var lastEntry = customHistory.pop();
  history.pushState(lastEntry.data, lastEntry.title, lastEntry.location);
  // load the last entry
});

Answer 2

接受的答案解决了禁用“前进”按钮的问题，但是创建了一个新的烦人的问题，即“导航到的页面”重复插入历史记录中（如答案注释所示）。

这是解决问题“前进按钮失效”并避免出现“重复”后退按钮的方法。

//setup the popstate EventListener that reacts to browser history events
window.addEventListener("popstate",function(event){
     // In order to remove any "forward"-history (i.e. disable forward 
     // button), this popstate's event history state (having been navigated 
     // back to) must be insert _again_ as a new history state, thereby 
     // making it the new most forwad history state. 
     // This leaves the problem that to have this popstate event's history
     // state to become the new top, it would now be multiple in the history
     //
     // Effectively history would be:
     //  * [states before..] ->
     //  * [popstate's event.state] -> 
     //  * [*newly pushed _duplicate_ of popstate's event.state ]
     // 
     // To remove the annoyance/confusion for the user to have duplicate
     // history states, meaning it has to be clicked at least twice to go 
     // back, we pursue the strategy of marking the current history state
     // as "obsolete", as it has been inserted _again_ as to be the most
     // forward history entry. 
     // 
     // the popstate EventListener will hence have to distinguish 2 cases:
     //
     // case A) "popstate event is _not_ an obsolete duplicate"...
     if( typeof event.state == "object" 
         && event.state.obsolete !== true)
     {
         //...so we _firstly_ mark this state as to from now on "obsolete",
         // which can be done using the history API's replaceState method
         history.replaceState({"obsolete":true},"");
         // and _secondly_ push this state _one_more_time_ to the history
         // which will solve the OP's desired "disable forward button" issue
         history.pushState(event.state,"");
     }

     // case B: there is the other case that the user clicked "back" and
     // encounters one of the duplicate history event entries that are 
     // "obsolete" now.
     if( typeof event.state == "object" 
         && event.state.obsolete === true)
     {
         //...in which case we simply go "back" once more 
         history.back() 
         // by this resolving the issue/problem that the user would
         // be counter-intuively needing to click back multiple times.
         // > we skip over the obsolete duplicates, that have been the
         // the result of necessarily pushing a history state to "disable
         // forward navigation"
     }

},false);

Answer 3

只需使用以下 jquery 禁用前进按钮：

  $( document ).ready( function(){
    history.pushState(null,  document.title, location.href);        
   });