Question

我有一个使用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管理的页面。

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

您的删除第2页和第3页，点击后退按钮会导致：

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（返回），只允许一个JQM转换通过。您将在一个步骤中展开page4＆gt; page3＆gt; page2＆gt; page1，并且您只允许JQM执行从page4到page1的单个转换
检查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);
    });
});

另见here

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

Answer 3

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

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

    }}
}

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

4 个答案: