使用HTML5 window.history
API,我可以在我的Web应用程序上很好地控制导航。
该应用程序当前有两个状态:selectDate
(1) 和 enterDetails
(2)。
当应用程序加载时,我使用replaceState
并设置一个popState
监听器:
history.replaceState({stage:"selectDate",...},...);
window.onpopstate = function(event) {
that.toStage(event.state.stage);
};
当选择日期后,应用程序进入第二阶段时,我将状态2压入堆栈:
history.pushState({stage:"enterDetails",...},...);
每当详细信息发生更改时,此状态都会被替换,以便将其保存在历史记录中。
有三种方法可以离开阶段2:
- 保存(AJAX提交)
- 取消
- 返回按钮
返回按钮由 popstate
监听器处理。取消按钮 推送阶段1,以便用户可以返回到他们输入的细节,即后退按钮。这两个都很好用。
保存按钮应该恢复为阶段1 并且不允许用户导航回详细信息页面(因为他们已经提交)。基本上,它应该使历史堆栈长度为1。
但是似乎没有history.delete()
或history.merge()
。我能做的最好的事情是history.replaceState(stage1)
,这会将历史堆栈留下:["selectDate","selectDate"]
。
如何摆脱一个图层?
编辑:
想到了别的事情,但也行不通。
history.back(); //moves history to the correct position
location.href = "#foo"; // successfully removes ability to go 'forward',
// but also adds another layer to the history stack
这将使历史堆栈变为["selectDate","selectDate#foo"]
。
那么,有没有一种方法可以在不推入新状态的情况下删除“向前”历史记录的方式作为替代方案?
myHistory
,就像您所说的myHistory.push("page_im_in_now")
?请给我一个例子。 - Mr_Perfect