2012-06-04 22 views
22

Tengo una aplicación PhoneGap usando jQuery Mobile. En una página determinada, no puedo permitir que el usuario regrese a la última página que visitó.¿Cómo borrar o cambiar el historial de navegación de Jquery Mobile?

Las páginas orden es así:

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

Lo que necesito: que desea borrar toda la historia cuando el usuario está en page 4 y establecer page 1 como si fuera el último y único visitado en caso de el usuario intenta regresar. Tal vez eso no sea totalmente posible, entonces aceptaría cualquier sugerencia.

Imagino que jQuery Mobile almacena el historial de navegación en algún tipo de arreglo, y espero que alguien pueda ayudarlo a encontrarlo. ¡Gracias por adelantado!

EDIT: estoy usando multi-page template, que es una sola página HTML, donde ciertos divs funciona como páginas web gestionados por jQuery Mobile.

Respuesta

29

Básicamente tiene dos "ollas" de historia que debe manipular. Navegador y JQM.

JQM urlHistory
Usted puede modificar JQMs urlHistory muy fácilmente. A partir del código 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); 
    } 
}; 

Así que todas las funciones anteriores están disponibles y pueden ser llamados así por ejemplo:

$.mobile.urlHistory.clearForward(); 

para supervisar su historia, poner esto en alguna parte y espere el pageChange (una vez las transiciones se hacen) para ver lo que está dentro de la urlHistory:

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

Desde allí se puede empezar a ver lo que debería ser en la historia y limpiarlo como sea necesario.

Estoy usando esto mucho para mi propia capa de navegación para modificar lo que está almacenado en el urlHistory y lo que no se debe almacenar. Sincronización-ción con el navegador es la parte difícil ...

En sincronización-ción con el navegador:
En mi capa de navegación sólo estoy eliminación de entradas dobles de la urlHistory, así que siempre hay una página para ir a (y no dos), cuando haces clic en el botón Atrás del navegador. En su caso, presumiblemente tendrá 4 entradas en el historial del navegador, pero si elimina 2 entradas de JQM urlHistory, tendrá dos páginas "no llegó a" cuando se hace clic en el botón Atrás.Así que si su historial de navegación se ve así:

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

Y su page2 quitar y page3, al hacer clic respaldo botón debe dar lugar a:

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] 

Una solución teórica sería:

  1. mantener un contador de cómo "profundo" se entra en una página
  2. eliminar páginas de JQM urlHistory y obtener un valor "jump" = counter-removedPáginas
  3. en el siguiente navegador hacer clic atrás, hacer saltar x window.history (volver) y solo dejar pasar una transición JQM. Usted URL descansar Page4> page3> page2> page1 en un solo paso y sólo se permite JQM hacer un solo paso de la página 4 de la Página 1
  4. verificación del contenido de la urlHistory y limpiar después de su "triple vuelta"

Tenga cuidado con esto es no es una solución óptima y tiene que considerar muchas cosas (el usuario hace clic en otro lugar antes de volver, etc.). Intenté siempre conseguir que algo como esto funcionara en una configuración más complicada y, finalmente, dejé de usarlo, porque nunca funcionó como debería. Pero para una configuración más simple, puede funcionar.

+11

¡Que seas bendecido por los dioses antiguos y nuevos! –

+0

En JSF, por ejemplo, he utilizado este enfoque para anular el clic del botón 'data-rel =" back "' de jQuery Mobile: 'window.history.go (- # {managedBean.count});', que haría convierte en 'window.history.go (-3);' si estás en la página 4, por ejemplo. – falsarella

+0

No encuentro $ .mobile.urlHistory en los documentos jqm ... http://api.jquerymobile.com/?s=urlHistory – dsdsdsdsd

3

jQuery Mobile utiliza el historial del navegador para la navegación de página a página, por lo que no es posible evitar que el usuario retroceda en un navegador. Sin embargo, dado que tiene una aplicación de phonegap, puede manejar el botón Atrás directamente. Esta pregunta debería ayudarlo: Override Android Backbutton behavior only works on the first page with PhoneGap

+0

Estoy usando una plantilla de varias páginas, usando solo un archivo html. No creo que use el historial del navegador, sino un historial de navegador autogestionado similar a Ajax. –

+0

Sí, está usando history.pushState/cambiando el hash en los navegadores que no son compatibles con pushState. Esto aún crea entradas en el historial del navegador que no puede eliminar (no es posible desde javascript) - consulte https://developer.mozilla.org/en/DOM/Manipulating_the_browser_history. – OlliM

+0

Es posible desactivar esta funcionalidad de jQM, pero eso significaría que perderá una gran parte de la funcionalidad con ella, que tendrá que implementar usted mismo. El interruptor está ajaxEnabled: http: // jquerymobile.com/test/docs/api/globalconfig.html – OlliM

1

Esta es una respuesta simple, por lo que debe tomarse como tal. Es posible eliminar los elementos fuera de la urlHistory.stack simplemente con

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

Si desea asegurarse de que la página correcta se elimina puede hacer algo como esto.

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

    }} 
} 
+0

¿Cuidar para explicar el voto a favor? – jacobross85

13

Just an FYI; en JQM 1.4 rc1 no hay urlHistory, pero puede leer desde el objeto de navegación.

ejemplo:

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

y se puede utilizar esta función de utilidad para ver que hay de nuevo:

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

ver también here

comportamiento actual en desuso de despojar a las cadenas de consulta de hashes. A partir de 1.5, seguiremos las especificaciones en hashes y proporcionaremos un gancho para gestionar la navegación personalizada.

Cuestiones relacionadas