如何清除或更改 Jquery Mobile 的导航历史记录? [英] How to clear or change the navigation history of Jquery Mobile?

问题描述

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

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.

页面顺序是这样的:

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

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

What I need: I want to clear all history when the user is at page 4 and set page 1 as 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.

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

I imagine jQuery Mobile stores navigation history in some kind of array, and I hope someone can help find that. Thanks in advance!

我正在使用 多页模板，这是单个 html 页面，其中某些 div 用作由 jQuery Mobile 管理的页面.

I'm using multi-page template, which is a single html page, where certain divs works as pages managed by jQuery Mobile.

推荐答案

基本上，您有两个历史罐"需要篡改.浏览器和 JQM.

Basically you have two history "pots" you need to tamper with. Browser and JQM.

JQM urlHistory
您可以非常轻松地修改 JQM 的 urlHistory.来自 JQM 代码:

JQM urlHistory
You can modify JQMs urlHistory very easily. From the JQM code:

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

要监视您的历史记录，请将其放在某处并侦听 pageChange(完成转换后)以查看 urlHistory 中的内容:

To monitor your history, put this somewhere and listen for pageChange (once transitions are done) to see what is inside the 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.

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

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 中删除了双重条目，因此当您单击浏览器后退按钮时，总会有一个页面要访问(而不是两个).在您的情况下，您可能会在浏览器历史记录中有 4 个条目，但是如果您从 JQM urlHistory 中删除 2 个条目，那么当单击后退按钮时，您将有两个不可访问"的页面.因此，如果您的浏览器历史记录如下所示:

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:

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

并且您删除 page2 和 page3，点击后退按钮应该会导致:

And your remove page2 and page3, clicking back-button should result in:

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 中删除页面并获得跳转"值 = counter-removedPages
3. 在下一次浏览器返回时，跳转 x window.history(back) 并且只让一个 JQM 过渡通过.您的 url 将在一个步骤中展开 page4>page3>page2>page1，并且您只允许 JQM 从 page4 到 page1 进行一次转换
4. 检查 urlHistory 中的内容并在三回"后进行清理

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

Beware this is not an optimal solution and 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.

这篇关于如何清除或更改 Jquery Mobile 的导航历史记录?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！