首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >HTML5历史记录禁用转发按钮

HTML5历史记录禁用转发按钮
EN

Stack Overflow用户
提问于 2012-07-19 03:06:17
回答 3查看 24.4K关注 0票数 15

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

我想使用后退按钮启用导航,但我从不希望启用前进按钮。

这里有几个简短的信息:

项目项目用户应该只能返回,决不能forward

  • Pressing浏览器返回按钮关闭当前页面屏幕用户打开并重新加载上一页

  • 项目仅针对最新版本的Chrome,因此其他浏览器实现并不重要

  • 我仅使用原生JavaScript和jQuery,我想在没有History.js

的情况下执行此操作

当我加载一个新屏幕时,我运行下面的代码行:

代码语言:javascript
复制
history.pushState(screenData, window.document.title, "#");

我通过jQuery绑定到popstate事件:

代码语言:javascript
复制
$(window).bind("popstate", function(event) {
    if (event.originalEvent.state != null) {
        // Logic that loads the previous screen using my screen stack
    }
}); 

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

我能用replaceState做到这一点吗?我不知道该怎么做...

EN

回答 3

Stack Overflow用户

回答已采纳

发布于 2012-07-19 04:43:35

错误部件

要真正禁用前进按钮,您必须能够删除浏览器历史记录,这并不是所有javascript实现都允许的,因为它将允许站点删除整个历史记录,这永远不会符合用户的兴趣。

Good Part

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

代码语言:javascript
复制
var customHistory = [];

推送你用history.pushState(screenData, window.document.title, "#");加载的每个页面,就像你以前做的那样。只需将状态添加到您的自定义历史记录:

代码语言:javascript
复制
history.pushState(screenData, window.document.title, "#");
customHistory.push({data: screenData, title: window.document.title, location: '#'});

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

代码语言:javascript
复制
window.onpopstate = function(e) { 
  var lastEntry = customHistory.pop();
  history.pushState(lastEntry.data, lastEntry.title, lastEntry.location);
  // load the last entry
}

或在jQuery中

代码语言:javascript
复制
$(window).on('popstate', function(e) {
  var lastEntry = customHistory.pop();
  history.pushState(lastEntry.data, lastEntry.title, lastEntry.location);
  // load the last entry
});
票数 11
EN

Stack Overflow用户

发布于 2018-10-02 21:14:02

接受的答案解决了禁用转发按钮的问题,但也产生了一个新的恼人问题:“导航回的页面被重复插入到历史记录中(如答案注释所示)。”

这里是如何解决问题“禁用前进按钮”和避免“重复”后退按钮的问题。

代码语言:javascript
复制
//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);
票数 11
EN

Stack Overflow用户

发布于 2018-11-14 14:35:38

只需使用下面的jquery禁用转发按钮:

代码语言:javascript
复制
  $( document ).ready( function(){
    history.pushState(null,  document.title, location.href);        
   });
票数 5
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/11548558

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档