22

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

页面顺序是这样的：

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

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

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

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

4

4 回答 4

33

基本上你有两个需要篡改的历史“罐子”。浏览器和 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(back) 并且只让一个 JQM 转换通过。您的 url 将一步展开 page4>page3>page2>page1 并且您只允许 JQM 进行从 page4 到 page1 的一次转换
  4. 检查 urlHistory 中的内容并在“三重返回”之后进行清理

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

于 2012-06-15T08:03:14.067 回答
15

仅供参考；在 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 开始，我们将遵循哈希规范并提供一个钩子来处理自定义导航。

于 2013-11-20T15:58:59.350 回答
3

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

于 2012-06-04T16:04:23.043 回答
2

这是一个简单的答案，因此应该这样看待。您可以简单地从 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];

    }}
}
于 2013-11-15T18:43:18.087 回答