HTML5历史记录禁用前进按钮 [英] HTML5 history disabling forward button

问题描述

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

I am writing a single page javascript application using the HTML5 History API. The application loads content via Ajax and internally maintains state information on the foreground screen using a screen stack.

我想使用后退"按钮启用导航，但是我从不希望启用前进"按钮.

一些简短的信息:

• 用户应该只能回退，永远不能前进
• 按下浏览器后退按钮可关闭当前打开页面的用户，并重新加载上一个页面
• 该项目仅针对最新版本的Chrome，因此其他浏览器的实现并不重要
• 我仅使用本机JavaScript和jQuery，我想在没有History.js的情况下执行此操作

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

When I load a new screen I run the following line:

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

我通过jQuery绑定到popstate事件:

I bind to the popstate event via jQuery:

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

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

My application's history management is working, however when I go back the forward button is enabled. I need to figure out how to remove data from history on the popstate event.

我可以用replaceState做到这一点吗?我不确定该怎么做...

Can I do this with replaceState? I'm not sure how to go about doing this...

推荐答案

不良部分

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

To really disable the forward button, you would have to be able to delete browser history, which is not allowed by all javascript implementations because it would allow sites to delete the entire history, which would never be in the interest of the user.

好零件

这有点棘手，但我想如果您要自定义历史记录就可以使用.您可以只在popstate事件中使用pushState来使您的实际页面成为最上面的历史记录条目.我认为您处理历史记录的方式将永远不会卸载.这使您可以自己跟踪用户历史记录:

This is a bit tricky, but I guess it could work if you want to do custom history. You could just use pushState in the popstate event to make your actual page the topmost history entry. I assume the way you handle your history, your window will never unload. This allows you to keep track of the user history yourself:

var customHistory = [];

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

Push every page you load with history.pushState(screenData, window.document.title, "#");, like you did before. Only you add the state to your custom history, too:

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

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

now if you have a popstate event, you just pop you custom history and push it to the topmost entry:

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

这篇关于HTML5历史记录禁用前进按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！