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

Question

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

页面顺序如下:

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

我需要什么:当用户位于第4页时，我想清除所有历史记录，并将第1页设置为最后一个并且仅在用户尝试返回的情况下访问。也许这不太可能，那么我会接受任何建议。

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

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

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

理论上的解决方法是:

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

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