HTML5历史记录禁用转发按钮
我正在使用HTML5 History API编写一个单页javascript应用程序。应用程序通过Ajax加载内容，并使用屏幕堆栈在内部维护前景屏幕上的状态信息。
我想使用后退按钮启用导航，但我从不希望启用前进按钮。
这里有几个简短的信息：
项目项目用户应该只能返回，决不能forward
- Pressing浏览器返回按钮关闭当前页面屏幕用户打开并重新加载上一页
- 项目仅针对最新版本的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
}
}); 我的应用程序的历史记录管理正在工作，但是当我返回时，前进按钮是启用的。我需要弄清楚如何在popstate事件上从history中删除数据。
我能用replaceState做到这一点吗？我不知道该怎么做...
回答 3
Stack Overflow用户
发布于 2012-07-19 04:43:35
错误部件
要真正禁用前进按钮，您必须能够删除浏览器历史记录，这并不是所有javascript实现都允许的，因为它将允许站点删除整个历史记录，这永远不会符合用户的兴趣。
Good Part
这有点棘手，但我想如果你想要自定义历史记录，它可能会起作用。您可以在popstate事件中使用pushState，使实际页面成为最顶层的历史记录条目。我假设你处理历史记录的方式，你的窗口永远不会卸载。这允许您自己跟踪用户历史记录：
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
});Stack Overflow用户
发布于 2018-10-02 21:14:02
接受的答案解决了禁用转发按钮的问题，但也产生了一个新的恼人问题：“导航回的页面被重复插入到历史记录中(如答案注释所示)。”
这里是如何解决问题“禁用前进按钮”和避免“重复”后退按钮的问题。
//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);Stack Overflow用户
发布于 2018-11-14 14:35:38
只需使用下面的jquery禁用转发按钮：
$( document ).ready( function(){
history.pushState(null, document.title, location.href);
});https://stackoverflow.com/questions/11548558
复制相似问题
腾讯云开发者
