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

Question

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

页面顺序如下:

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

我需要的是:我希望在用户访问时清除所有历史记录page 4并将其设置page 1为最后一个,并且只有在用户尝试返回时才访问.也许这不是完全可能的,那么我会接受任何建议.

我想jQuery Mobile将导航历史存储在某种阵列中,我希望有人可以帮助找到它.提前致谢!

编辑: 我正在使用多页面模板,这是一个单一的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中删除页面并获取"跳转"值= counter-removedPages
3. 在下一个浏览器上单击后,跳转x window.history(返回),只允许一个JQM转换通过.您将在一个步骤中展开page4> page3> page2> page1,并且您只允许JQM执行从page4到page1的单个转换
4. 检查urlHistory中的内容并在"三重后退"后清理

请注意,这不是最佳解决方案,您必须考虑很多事情(用户在返回之前点击其他地方等).我试图永远得到这样的东西在更复杂的设置中工作,最终只是停止使用它,因为它从来没有按预期工作.但是对于更简单的设置,它可能非常有效.

Answer 2

只是一个FYI; 在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);
    });
});

另见这里

从散列中剥离查询字符串的不推荐使用的当前行为.从1.5开始,我们将遵循哈希规范并提供一个钩子来处理自定义导航.