如何清除或更改 Jquery Mobile 的导航历史记录？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10884232/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to clear or change the navigation history of Jquery Mobile?
提问by Marcelo Assis
I have a PhoneGap App using jQuery Mobile. At a certain page, I cannot let the user go back to the last page he visited.
我有一个使用 jQuery Mobile 的 PhoneGap 应用程序。在某个页面，我不能让用户回到他访问的最后一个页面。
The pages order is like this:
页面顺序是这样的：
(1)index -> (2)listing items -> (3)form submited -> (4)sucess page
What I need:I want to clear all history when the user is at page 4and set page 1as it were the last and only visited in case of the user tries to go back. Maybe that's not totally possible, then I would accept any suggestion.
我需要什么：我想清除用户所在的所有历史记录，page 4并将其设置page 1为最后一次访问，并且仅在用户尝试返回时才访问过。也许这不是完全可能的，那么我会接受任何建议。
I imagine jQuery Mobile stores navigation history in some kind of array, and I hope someone can help find that. Thanks in advance!
我想象 jQuery Mobile 将导航历史存储在某种数组中，我希望有人可以帮助找到它。提前致谢！
EDIT:I'm using multi-page template, which is a single html page, where certain divs works as pages managed by jQuery Mobile.
编辑：我正在使用多页模板，这是一个单一的 html 页面，其中某些 div 用作由 jQuery Mobile 管理的页面。
回答by frequent
Basically you have two history "pots" you need to tamper with. Browser and JQM.
基本上，您有两个需要篡改的历史“罐”。浏览器和 JQM。
JQM urlHistory
You can modify JQMs urlHistory very easily. From the JQM code:
JQM urlHistory
您可以非常轻松地修改JQM 的 urlHistory。从 JQM 代码：
urlHistory = {
// Array of pages that are visited during a single page load.
// Each has a url and optional transition, title, and pageUrl
// (which represents the file path, in cases where URL is obscured, such as dialogs)
stack: [],
// maintain an index number for the active page in the stack
activeIndex: 0,
// get active
getActive: function () {
return urlHistory.stack[urlHistory.activeIndex];
},
getPrev: function () {
return urlHistory.stack[urlHistory.activeIndex - 1];
},
getNext: function () {
return urlHistory.stack[urlHistory.activeIndex + 1];
},
// addNew is used whenever a new page is added
addNew: function (url, transition, title, pageUrl, role) {
// if there's forward history, wipe it
if (urlHistory.getNext()) {
urlHistory.clearForward();
}
urlHistory.stack.push({
url: url,
transition: transition,
title: title,
pageUrl: pageUrl,
role: role
});
urlHistory.activeIndex = urlHistory.stack.length - 1;
},
//wipe urls ahead of active index
clearForward: function () {
urlHistory.stack = urlHistory.stack.slice(0, urlHistory.activeIndex + 1);
}
};
So all of the above functions are available and can be called like this for example:
所以上述所有函数都可用，并且可以像这样调用，例如：
$.mobile.urlHistory.clearForward();
To monitor your history, put this somewhere and listen for pageChange (once transitions are done) to see what is inside the urlHistory:
要监视您的历史记录，请将其放在某处并侦听 pageChange（完成转换后）以查看 urlHistory 中的内容：
$(document).on('pagechange', 'div:jqmData(role="page")', function(){
console.log($.mobile.urlHistory.stack);
});
From there you can start to see what should be in the history and clean it up as you need.
从那里您可以开始查看历史记录中应包含的内容并根据需要对其进行清理。
I'm using this a lot for my own navigation layer to modify what is stored in the urlHistory and what should not be stored. Sync-ing with the browser is the difficult part...
我在我自己的导航层中经常使用它来修改存储在 urlHistory 中的内容以及不应该存储的内容。与浏览器同步是困难的部分......
On sync-ing with the browser:
In my navigation layer I'm only removing double entries from the urlHistory, so there is always a page to go to (and not two), when you click the browser back button. In your case, you will presumable have 4 entries in the browser history, but if you remove 2 entries from JQM urlHistory, you will have two pages "not to got to"when the back button is clicked. So if your browser history looks like this:
与浏览器同步：
在我的导航层中，我只从 urlHistory 中删除了双重条目，因此当您单击浏览器后退按钮时，总会有一个页面要转到（而不是两个）。在您的情况下，您可能在浏览器历史记录中有 4 个条目，但是如果您从 JQM urlHistory 中删除 2 个条目，则单击后退按钮时您将有两个页面“不要访问”。因此，如果您的浏览器历史记录如下所示：
www.google.com
www.somePage.com
www.YOUR_APP.com = page1
page2
page3
page4
And your remove page2and page3, clicking back-button should result in:
并且您删除page2和page3，单击后退按钮应导致：
1st back-click = page4 > page1
2nd back-click = page1 > www.somePage.com [because you removed page3]
3rd back-click = www.somePage.com > www.google.com [because you removed page2]
A theoretical workaround would be:
理论上的解决方法是：
- keep a counter how "deep" you go into a page
- remove pages from JQM urlHistory and get a "jump" value = counter-removedPages
- on next browser back click, do jump x window.history(back) and only let one JQM transition pass. You url will unwind page4>page3>page2>page1 in one step and you only allow JQM to do a single transition from page4 to page1
- check what's in the urlHistory and clean up after your "triple back"
- 保持一个计数器你进入一个页面的“深度”
- 从 JQM urlHistory 中删除页面并获得“跳转”值 = counter-removedPages
- 在下一次浏览器返回单击时，跳转 x window.history(back) 并且只让一个 JQM 过渡通过。您的 url 将在一个步骤中展开 page4>page3>page2>page1，并且您只允许 JQM 执行从 page4 到 page1 的单个转换
- 检查 urlHistory 中的内容并在“三重背”后进行清理
Beware this is not an optimal solutionand you have to consider a lot of things (user clicks somewhere else before going back etc). I tried forever to get something like this to work in a more complicated setup and eventually just stopped using it, because it never worked as it should. But for a simpler setup it may very well work.
请注意，这不是最佳解决方案，您必须考虑很多事情（用户在返回之前点击其他地方等）。我一直试图让这样的东西在更复杂的设置中工作，最终只是停止使用它，因为它从来没有像它应该的那样工作。但是对于更简单的设置，它可能会很好地工作。
回答by Nabil.A
Just an FYI; in JQM 1.4rc1there is no urlHistory, but you can read from navigate object.
仅供参考；在 JQM 1.4 rc1中没有urlHistory，但您可以从导航对象中读取。
example:
例子：
$.mobile.navigate.history.stack[0];
// Object {hash: "", url: "http://localhost:61659/"}
$.mobile.navigate.history.stack[1];
// Object {url: "http://localhost:61659/Search/Filter", hash: "#/Search/Filter", title: "Search Result", transition: "pop", pageUrl: "/Search/Filter"…}
and you can use this utility function to see whats going on:
您可以使用此实用程序功能来查看发生了什么：
$(document).on('pagechange',function() {
console.log("Current:" + $.mobile.navigate.history.getActive().url);
console.log("Stack: (active index = " + $.mobile.navigate.history.activeIndex + " -previous index: " + $.mobile.navigate.history.previousIndex + " )");
$.each($.mobile.navigate.history.stack, function (index, val) {
console.log(index + "-" + val.url);
});
});
see also here
另见此处
Deprecated current behaviour of stripping query strings from hashes. Starting in 1.5 we'll be following spec on hashes and provide a hook to handle custom navigation.
已弃用从哈希中剥离查询字符串的当前行为。从 1.5 开始，我们将遵循哈希规范并提供一个钩子来处理自定义导航。
回答by OlliM
jQuery Mobile uses the browser history for page to page navigation, so preventing the user from going back is not really possible in a browser. However, since you have a phonegap app, you can handle the back button directly. This question should help you: Override Android Backbutton behavior only works on the first page with PhoneGap
jQuery Mobile 使用浏览器历史记录进行页面到页面导航，因此在浏览器中阻止用户返回实际上是不可能的。但是，由于您有一个 phonegap 应用程序，您可以直接处理后退按钮。这个问题应该对你有所帮助：Override Android Backbutton behavior only works on the first page with PhoneGap
回答by JacobRossDev
This is a simple answer and so should be taken as such. You may delete items out of the urlHistory.stack simply with
这是一个简单的答案，因此应该如此看待。您可以简单地从 urlHistory.stack 中删除项目
delete $.mobile.urlHistory.stack[index_of_your_choosing];
If you want to make sure the correct page is deleted you may do something like this.
如果您想确保删除正确的页面，您可以执行以下操作。
var stack_count = $.mobile.urlHistory.stack.length;
for(x=0; x<stack_count; x++){
$.mobile.urlHistory.stack[x];
if(typeof $.mobile.urlHistory.stack[x] !== 'undefined'){
if($.mobile.urlHistory.stack[x].url != 'http://url-to-exclude.com/'){
delete $.mobile.urlHistory.stack[x];
}}
}
