web-dev-qa-db-fra.com

Comment effacer ou modifier l'historique de navigation de Jquery Mobile?

J'ai une application PhoneGap utilisant jQuery Mobile. À une certaine page, je ne peux pas laisser l'utilisateur revenir à la dernière page qu'il a visitée.

L'ordre des pages est le suivant:

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

Ce dont j'ai besoin: Je veux effacer tout l'historique lorsque l'utilisateur est à page 4 Et mettre page 1 comme c'était le dernier et seulement visité au cas où l'utilisateur essaierait de revenir en arrière. Ce n'est peut-être pas totalement possible, alors j'accepterais toute suggestion.

J'imagine que jQuery Mobile stocke l'historique de navigation dans une sorte de tableau, et j'espère que quelqu'un pourra aider à le trouver. Merci d'avance!

EDIT: J'utilise modèle multi-page , qui est une page html unique, où certains divs fonctionnent comme des pages gérées par jQuery Mobile.

jqueryjquery-mobile
22
Marcelo Assis

Fondamentalement, vous avez deux "pots" d'histoire que vous devez modifier. Navigateur et JQM.

JQM urlHistory
Vous pouvez modifier très facilement l'URLHistory de JQM. À partir du code 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);
    }
};

Ainsi, toutes les fonctions ci-dessus sont disponibles et peuvent être appelées comme ceci par exemple:

$.mobile.urlHistory.clearForward();

Pour surveiller votre historique, placez-le quelque part et écoutez pageChange (une fois les transitions effectuées) pour voir ce qui se trouve à l'intérieur de l'urlHistory:

$(document).on('pagechange', 'div:jqmData(role="page")', function(){
    console.log($.mobile.urlHistory.stack);
});

De là, vous pouvez commencer à voir ce qui devrait être dans l'histoire et à nettoyer selon vos besoins.

J'utilise beaucoup cela pour ma propre couche de navigation pour modifier ce qui est stocké dans urlHistory et ce qui ne devrait pas être stocké. La synchronisation avec le navigateur est la partie difficile ...

Lors de la synchronisation avec le navigateur:
Dans ma couche de navigation, je ne supprime que les doubles entrées de urlHistory, il y a donc toujours une page à visiter (et non deux) lorsque vous cliquez sur le bouton de retour du navigateur. Dans votre cas, vous aurez probablement 4 entrées dans l'historique du navigateur, mais si vous supprimez 2 entrées de JQM urlHistory, vous aurez deux pages "à ne pas atteindre" lorsque vous cliquez sur le bouton Précédent. Donc, si l'historique de votre navigateur ressemble à ceci:

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

Et votre page de suppression 2 et page3 , en cliquant sur le bouton de retour devrait entraîner :

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]

Une solution théorique serait:

  1. garder un compteur à quel point vous êtes "profond" dans une page
  2. supprimer des pages de JQM urlHistory et obtenir une valeur "jump" = counter-suppriméPages
  3. au navigateur suivant, cliquez sur, sautez x window.history (retour) et ne laissez passer qu'une transition JQM. Votre URL déroulera page4> page3> page2> page1 en une seule étape et vous autorisez JQM à effectuer une seule transition de page4 à page1
  4. vérifier ce qui est dans l'urlHistory et nettoyer après votre "triple dos"

Attention, c'est pas une solution optimale et vous devez considérer beaucoup de choses (l'utilisateur clique ailleurs avant de revenir, etc.). J'ai essayé pour toujours de faire fonctionner quelque chose comme ça dans une configuration plus compliquée et j'ai finalement arrêté de l'utiliser, car cela n'a jamais fonctionné comme il se doit. Mais pour une configuration plus simple, cela peut très bien fonctionner.

31
frequent

Juste un FYI; dans JQM 1,4  rc1 il n'y a pas de urlHistory, mais vous pouvez lire à partir de l'objet de navigation.

exemple:

$.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"…}

et vous pouvez utiliser cette fonction utilitaire pour voir ce qui se passe:

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

voir aussi ici

Comportement actuel obsolète de la suppression des chaînes de requête des hachages. À partir de la version 1.5, nous suivrons les spécifications sur les hachages et fournirons un crochet pour gérer la navigation personnalisée.

14
Nabil.A

jQuery Mobile utilise l'historique du navigateur pour la navigation de page en page, il n'est donc pas vraiment possible d'empêcher l'utilisateur de revenir en arrière dans un navigateur. Cependant, puisque vous avez une application PhoneGap, vous pouvez gérer directement le bouton Retour. Cette question devrait vous aider: Override Android Comportement Backbutton ne fonctionne que sur la première page avec PhoneGap

3
OlliM

Il s'agit d'une réponse simple et doit donc être considérée comme telle. Vous pouvez supprimer des éléments de urlHistory.stack simplement avec

delete $.mobile.urlHistory.stack[index_of_your_choosing];

Si vous voulez vous assurer que la page correcte est supprimée, vous pouvez faire quelque chose comme ça.

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

    }}
}
2
JacobRossDev