javascript - ejemplo - window history pushstate refresh

history.pushState-no funciona?

Question

Quiero cambiar html sin recargar. Lo hago como

$(''#left_menu_item'').click(function(e) {
    if (!!(window.history && history.pushState)) {
        e.preventDefault();
        history.pushState(null, null, newUrl);
    }
});

Funciona correctamente Pero si quiero volver con el botón "Atrás": la url de cambio del navegador anterior, pero no vuelve a cargar la página. ¿Por qué?

Answer 1

este comportamiento es esperado y está de acuerdo con las specifications de manipulación de la pila de historial.

Este es un problema relativamente complejo de explicar. pero, en resumen, piense en esto como esto: cualquier entrada de historial que el usuario empuja en la pila de historial (usando pushState, etc.) no merece una carga de página cuando se muda porque se considera una entrada de historial falsa (generada por el usuario).

¿por qué? este comportamiento es bueno y es coherente con la intención de otorgar al desarrollador más control sobre la página sin tener que recargarla (piense en ello como ajax: puede hacer cosas que antes solo eran posibles con la recarga de la página como recuperar datos, pero ahora puede hacerlo sin volver a cargar la página usando el objeto XMLHttpRequest ) ... si desea imitar el comportamiento de volver a cargar la página al hacer clic en el botón Atrás ... simplemente puede llamar a location.reload() cuando maneje la window.onpopstate evento

¿cómo? Esto puede estar fuera del alcance de su pregunta, pero solo quería ponerlo allí para describir lo que estamos hablando.

Déjeme explicarlo usando un ejemplo existente specifications (el texto extraído estará en cursiva ):

Supongamos que http://mozilla.org/foo.html ejecuta el siguiente JavaScript:

var stateObj = { foo: "bar" };
history.pushState(stateObj, "page 2", "bar.html");

Esto hará que la barra de URL muestre http://mozilla.org/bar.html , pero no hará que el navegador cargue bar.html ni que compruebe que existe bar.html.

piense en ello como si estuviera creando una entrada en la pila de historial que no está asociada con una carga de página real ... en lugar de una carga de página "falsa" (es decir, solo está usando javascript para manipular el dominio e insertar html) ...

Supongamos ahora que el usuario navega a http://google.com , y luego vuelve a hacer clic. En este punto, la barra de URL mostrará http://mozilla.org/bar.html , y la página obtendrá un evento de estado emergente cuyo objeto de estado contiene una copia de stateObj. La página en sí se verá como foo.html, aunque la página podría modificar su contenido durante el evento popstate.

el punto aquí es que bar.html es una entrada de historial falsa que se encuentra en la parte superior del http://mozilla.org/foo.html original, por lo que verá en la url http://mozilla.org/bar.html pero el contenido pertenecerá a foo (en este ejemplo, notemos que no manipulamos el contenido del dominio cuando presionamos bar.html ... si nos gustó en su ejemplo ... entonces ese contenido también se mostrará). La clave aquí es que la página se recarga! .. porque estamos sirviendo una página que tiene una entrada genuina en la pila de historial (incluso si en la url ... estamos mostrando una url que está asociada con una entrada falsa en la pila de historial).

también separa esta discusión de la página que maneja manualmente el evento popstate ... esa es una historia diferente y solo complicará las cosas.

Si volvemos a hacer clic nuevamente, la URL cambiará a http://mozilla.org/foo.html , y el documento obtendrá otro evento popstate, esta vez con un objeto de estado nulo. Aquí también, volver no cambia el contenido del documento de lo que era en el paso anterior, aunque el documento puede actualizar su contenido manualmente al recibir el evento popstate.

Aquí .. la página no se cargará! ... eso es porque estamos haciendo la transferencia de una entrada de pila de historial falsa a la real (y la real ya se cargó en el paso anterior ... así que la página se volvió a cargar y eso es todo).

eso es todo por el ejemplo el concepto es un poco difícil de explicar y te animo a que pruebes tu código haciendo clic en una combinación de páginas reales y falsas y verás un patrón de cuándo se carga la página y cuándo no.

Answer 2

window.onpopstate = function(event) {    
    if(event && event.state) {
        location.reload(); 
    }
}

Esto es lo que yo uso :)