如何清除或更改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.

推荐答案

基本上，您需要篡改两个历史记录"pot".浏览器和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(后退)，只让一个JQM过渡通过.您的网址将一步一步展开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的导航历史记录?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！