HTML5历史禁用前进按钮

我写一个单页的javascript使用HTML5历史API的应用程序。应用程序通过Ajax加载内容，并使用屏幕堆栈在内部维护前台屏幕上的状态信息。HTML5历史禁用前进按钮

我希望能够与后退按钮导航，但我从来没有想前进按钮启用。

一对夫妇的信息快速位：

用户应该永远只能是能够回去，永远向前
按下浏览器的后退按钮关闭当前页面的屏幕用户并重新加载以前一个
项目的目标是向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？我不知道如何去这样做......

来源

2012-07-18 dmck

坏的部分

要真正禁用前进按钮，你就必须能够删除浏览器历史记录，这是不是所有允许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 
});

来源

2012-07-18 20:43:35

你好，我知道它有点老的答案，但我可以问是否有任何可能使用后退按钮只是一次真正去追溯历史，而不是点击它的2倍？因为像这样我第一次将相同的网址推入历史记录中，当我使用后退按钮时，它首先弹出推送的历史网址，这是相同的，因此需要2次点击后退按钮才能返回。如果你能帮助我，这将是非常棒的。 – Redrif 2017-04-05 07:19:59

我设法自己做，所以不需要回应我的评论。非常感谢您使用自己的自定义历史记录的建议。 – Redrif 2017-04-05 09:01:35

每次用户导航都会清除转发历史记录。要禁用转发历史，您可以模拟导航在加载页面时在隐藏的iframe中加载url（例如“about：blank”）。

var rurl = "about:blank?e=" + Math.random(); 
window.open(rurl, "clear_fw");//being "clear_fw" the name of the iframe

希望它有帮助。

编辑：这将添加一个条目在history.back ...在我的情况下，这不是一个问题，但考虑到它。

来源

2013-11-12 12:01:08 Fernando

HTML5历史禁用前进按钮

回答

相关问题