如何清除或更改 Jquery Mobile 的导航历史记录？答案

【问题标题】：How to clear or change the navigation history of Jquery Mobile?如何清除或更改 Jquery Mobile 的导航历史记录？
【发布时间】：2012-06-08 16:46:31
【问题描述】：

我有一个使用 jQuery Mobile 的 PhoneGap 应用程序。在某个页面，我不能让用户回到他访问的最后一个页面。

页面顺序是这样的：

(1)index -> (2)listing items -> (3)form submited -> (4)sucess page

我需要什么：我想在用户位于page 4 时清除所有历史记录并将page 1 设置为最后一次访问，并且仅在用户尝试返回时访问.也许这不是完全可能的，那么我会接受任何建议。

我想象 jQuery Mobile 将导航历史存储在某种数组中，我希望有人可以帮助找到它。提前致谢！

编辑： 我正在使用multi-page template，这是一个单独的 html 页面，其中某些 div 用作由 jQuery Mobile 管理的页面。

【问题讨论】：

标签： jquery jquery-mobile

【解决方案1】：

基本上，您需要篡改两个历史“罐”。浏览器和 JQM。

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

所以上面所有的函数都是可用的，例如可以这样调用：

$.mobile.urlHistory.clearForward();

要监控您的历史记录，请将其放在某处并监听 pageChange（一旦转换完成）以查看 urlHistory 中的内容：

$(document).on('pagechange', 'div:jqmData(role="page")', function(){
    console.log($.mobile.urlHistory.stack);
});

从那里您可以开始查看历史记录中的内容并根据需要进行清理。

我在自己的导航层中经常使用它来修改 urlHistory 中存储的内容以及不应该存储的内容。与浏览器同步是困难的部分...

在与浏览器同步时：
在我的导航层中，我只从 urlHistory 中删除了双重条目，因此当您单击浏览器后退按钮时，总会有一个页面可以访问（而不是两个）。在您的情况下，您可能在浏览器历史记录中有 4 个条目，但如果您从 JQM urlHistory 中删除 2 个条目，当单击后退按钮时，您将有 两个“不能访问”的页面。因此，如果您的浏览器历史记录如下所示：

www.google.com
www.somePage.com
www.YOUR_APP.com = page1
    page2
    page3
    page4

而你删除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]

理论上的解决方法是：

记下你进入页面的“深度”
从 JQM urlHistory 中删除页面并获得“跳转”值 = counter-removedPages
在下一个浏览器后退单击时，跳转 x window.history(back) 并且只让一个 JQM 转换通过。您的网址将一步展开 page4>page3>page2>page1，并且您只允许 JQM 进行从 page4 到 page1 的一次转换
检查 urlHistory 中的内容并在“三重返回”后清理

请注意，这不是最佳解决方案，您必须考虑很多事情（用户在返回之前点击其他地方等）。我一直试图让这样的东西在更复杂的设置中工作，最终只是停止使用它，因为它从来没有按应有的方式工作。但是对于更简单的设置，它可能会很好地工作。

【讨论】：

愿新老神明保佑你！
在 JSF 中，例如，我使用这种方法来覆盖 jQuery Mobile 的 data-rel="back" 按钮的单击：window.history.go(-#{managedBean.count});，如果您在第 4 页中，它将变成 window.history.go(-3);，例如。
我在 jqm 文档中找不到 $.mobile.urlHistory ...api.jquerymobile.com/?s=urlHistory
没有什么是不应该乱来的。
这不再适用于 jQuery Mobile >= 1.4。见妈妈的回答。

【解决方案2】：

仅供参考；在 JQM 1.4 ~~rc1~~ 中没有urlHistory，但您可以从导航对象中读取。

示例：

$.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"…}

你可以使用这个实用函数来查看发生了什么：

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

另见here

不推荐从哈希中删除查询字符串的当前行为。从 1.5 开始，我们将遵循哈希规范并提供一个钩子处理自定义导航。

【讨论】：

【解决方案3】：

jQuery Mobile 使用浏览器历史记录进行页面导航，因此在浏览器中阻止用户返回实际上是不可能的。但是，由于您有一个 phonegap 应用程序，您可以直接处理后退按钮。这个问题应该对你有帮助：Override Android Backbutton behavior only works on the first page with PhoneGap

【讨论】：

我正在使用多页模板，只使用一个 html 文件。我不认为它使用浏览器历史记录，而是使用类似 ajax 的自我管理浏览器历史记录。
是的，它正在使用 history.pushState / 更改不支持 pushState 的浏览器上的哈希值。这仍然会在浏览器历史记录中创建您无法删除的条目（无法从 javascript 中删除） - 请参阅 developer.mozilla.org/en/DOM/Manipulating_the_browser_history。
可以从 jQM 中关闭此功能，但这意味着您将失去很大一部分功能，您必须自己实现这些功能。开关是ajaxEnabled：jquerymobile.com/test/docs/api/globalconfig.html

【解决方案4】：

这是一个简单的答案，因此应该这样理解。您可以简单地从 urlHistory.stack 中删除项目

delete $.mobile.urlHistory.stack[index_of_your_choosing];

如果您想确保删除正确的页面，您可以这样做。

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];

    }}
}

【讨论】：