javascript - ejemplo - JS-window.history-Eliminar un estado

pushstate w3schools

Question

Usando la API html5 window.history , puedo controlar la navegación bastante bien en mi aplicación web.

La aplicación actualmente tiene dos estados: selectDate (1) y enterDetails (2).

Cuando la aplicación se carga, replaceState y establezco una escucha popState :

history.replaceState({stage:"selectDate",...},...);
window.onpopstate = function(event) {
    that.toStage(event.state.stage);
};

Cuando se selecciona una fecha y la aplicación se mueve a la etapa 2, empujo el estado 2 a la pila:

history.pushState({stage:"enterDetails",...},...);

Este estado se reemplaza cada vez que cambian los detalles para que se guarden en el historial.

Hay tres formas de salir de la etapa 2:

• guardar (enviar ajax)
• cancelar
• botón de retroceso

El botón de retroceso es manejado por el oyente de popstate . El botón de cancelación presiona la etapa 1 para que el usuario pueda volver a los detalles que ingresaron al botón de retroceso. Estos dos funcionan bien.

El botón de guardar debería volver a la etapa 1 y no permitir que el usuario navegue de nuevo a la página de detalles (ya que se han enviado). Básico, y debería hacer que la pila de historial sea length = 1.

Pero no parece haber un history.delete() , o history.merge() . Lo mejor que puedo hacer es history.replaceState(stage1) que deja la pila de historial como: ["selectDate","selectDate"] .

¿Cómo me deshago de una capa?

Editar:

Pensé en otra cosa, pero tampoco funciona.

history.back(); //moves history to the correct position
location.href = "#foo"; // successfully removes ability to go ''forward'', 
                       // but also adds another layer to the history stack

Esto deja la pila de historial como ["selectDate","selectDate#foo"] .

Entonces, como alternativa, ¿hay una manera de eliminar el historial ''hacia adelante'' sin impulsar un nuevo estado?

Answer 1

Puede que ya hayas pasado, pero ... por lo que sé, no hay forma de eliminar una entrada (o estado) del historial.

Una opción que he estado estudiando es manejar el historial usted mismo en JavaScript y usar el objeto window.history como portador de clases.

Básicamente, cuando la página se carga por primera vez, crea su objeto de historial personalizado (iremos con una matriz aquí, pero usaremos lo que tenga sentido para su situación), luego haga su pushState inicial. Pasaría su objeto de historial personalizado como el objeto de estado, ya que puede ser útil si también necesita manejar a los usuarios que se alejan de su aplicación y vuelven más tarde.

var myHistory = [];

function pageLoad() {
    window.history.pushState(myHistory, "<name>", "<url>");

    //Load page data.
}

Ahora, cuando navegas, agregas a tu propio objeto de historial (o no, ¡el historial está ahora en tus manos!) Y usa replaceState para mantener el navegador fuera del bucle.

function nav_to_details() {
    myHistory.push("page_im_on_now");
    window.history.replaceState(myHistory, "<name>", "<url>");

    //Load page data.
}

Cuando el usuario navega hacia atrás, alcanzará su estado "base" (su objeto de estado será nulo) y podrá manejar la navegación de acuerdo con su objeto de historial personalizado. Después, haces otro pushState.

function on_popState() {
    // Note that some browsers fire popState on initial load,
    // so you should check your state object and handle things accordingly.
    // (I did not do that in these examples!)

    if (myHistory.length > 0) {
        var pg = myHistory.pop();
        window.history.pushState(myHistory, "<name>", "<url>");

        //Load page data for "pg".
    } else {
        //No "history" - let them exit or keep them in the app.
    }
}

El usuario nunca podrá navegar hacia adelante con los botones de su navegador porque siempre están en la página más nueva.

Desde la perspectiva del navegador, cada vez que "retroceden", inmediatamente vuelven a avanzar.

Desde la perspectiva del usuario, pueden navegar hacia atrás a través de las páginas pero no hacia adelante (básicamente simulando el modelo de "pila de páginas" del teléfono inteligente).

Desde la perspectiva del desarrollador, ahora tiene un alto nivel de control sobre la forma en que el usuario navega a través de su aplicación, a la vez que le permite usar los botones de navegación conocidos en su navegador. Puede agregar / eliminar elementos de cualquier parte de la cadena del historial como desee. Si usa objetos en la matriz de su historial, también puede hacer un seguimiento de información adicional sobre las páginas (como el contenido del campo y otras cosas).

También podría ampliar la idea para manejar la navegación hacia adelante. Necesitaría 3 páginas: una página de controlador "atrás", una página de controlador "adelante" y una página de "descanso" entre ellas donde el usuario estará normalmente. A continuación, tendrá que desplazarse hacia adelante y hacia atrás a lo largo de su objeto histórico en lugar de simplemente empujar / abrir los elementos.