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

Answer 4

注意：

代码已经过测试，并且工作正常，没有出现任何问题，但是我会激励开发人员在使用代码进行生产之前对其进行更多的测试
如果在应用程序中的任何位置使用HTML5 history.replaceState（），下面的代码现在可以正常工作。

我创建了一个自定义函数以禁用前进按钮：

这是代码（不适用于哈希路由策略）：

  <script>
    (function() {
      // function called after the DOM has loaded
      disableForwardButton();
    })();

    function disableForwardButton() {
      var flag, loop = false;
      window.addEventListener('popstate', function(event) {
        if (flag) {
          if (history.state != null && history.state.hasOwnProperty('page')) {
            loop = true;
            history.go(-1);
          } else {
            loop = false;
            history.go(-1);
          }
        } else {
          history.pushState({
              page: true
            },
            null,
            null
          );
        }
        flag = loop ? true : !flag;
      });

      window.onclick = function(event) {
        flag = false;
      };
    }
  </script>

Redrif 用户在接受的答案的注释中指出。问题是您必须双击后退按钮才能导航回到繁琐且不切实际的页面。

代码说明：：每次单击“后退”按钮时，您需要创建一个附加的历史记录元素，以便您当前所在的页面位于指向新创建的历史记录页面。这样，由于pushState是最后一个状态（将它显示为数组中的最后一个元素），因此没有前进的页面，因此您的前进按钮将始终被禁用。

之所以必须强制引入循环变量，是因为您可能会遇到以下情况：返回到特定页面，并出现pushState代码，该代码创建最后一个历史记录元素，而您选择单击以再次返回一些链接一次又一次返回上一页，该页面现在创建了一个附加的历史记录元素。换句话说，您有类似以下内容：

[第1页，第2页，第2页，第2页]

现在，在page2（索引3元素）上单击一次，然后再次单击“后退”按钮，您将再次进入page2索引1元素，但您不希望这样。请记住，您可以有一个x个page2元素数组，因此引入了false循环变量来解决该特殊情况，无论数组中有多少page2元素，它都会从page2跳到第1页。 >

Full functionality description

HTML5历史记录禁用前进按钮

4 个答案: