w3schools replacestate mdn example ejemplo javascript php html browser pushstate

javascript - replacestate - window.history.pushState refrescando el navegador



window.history clear (3)

Estoy trabajando en algunos códigos javascript y usando window.History.pushState para cargar nuevas páginas HTML , en lugar de usar etiquetas href . Mi código (que funciona bien ) se ve así.

window.History.pushState({urlPath:''/page1''},"",''/page1'')

Curiosamente, esto falla , es decir, vuelve a cargar el navegador

window.History.pushState({urlPath:''/page2.php''},"",''/page2.php'')

¡Pero esto funciona , el contenido se actualiza, el navegador no se actualiza! (fíjate que la URL es absoluta y no relativa)

window.History.pushState({urlPath:''www.domain.com/page2.php''},"",''www.domain.com/page2.php'')

La documentación para window.History.pushState dice que el tercer parámetro URL puede ser absoluto o relativo -

URL: la URL de la nueva entrada de historial viene dada por este parámetro. Tenga en cuenta que el navegador no intentará cargar esta URL después de una llamada a pushState (), pero podría intentar cargar la URL más tarde, por ejemplo, después de que el usuario reinicie el navegador. La nueva URL no necesita ser absoluta; si es relativo, se resuelve en relación con la URL actual. La nueva URL debe ser del mismo origen que la URL actual; de lo contrario, pushState () lanzará una excepción. Este parámetro es opcional; si no se especifica, se establece en la URL actual del documento.

Las URL absolutas parecen funcionar, pero las relativas parecen no serlo. ¿Por qué está pasando esto?


Como otros han sugerido, no está explicando claramente su problema, lo que está tratando de hacer, o cuáles son sus expectativas en cuanto a qué se supone que esta función realmente debe hacer.

Si he entendido correctamente, entonces espera que esta función actualice la página por usted (en realidad usa el término "vuelve a cargar el navegador").

Pero esta función no tiene la intención de volver a cargar el navegador.

Todo lo que hace la función es agregar (presionar) un nuevo "estado" en el historial del navegador, para que en el futuro, el usuario pueda volver a este estado en el que está ahora la página web.

Normalmente, esto se usa junto con las llamadas AJAX (que actualizan solo una parte de la página).

Por ejemplo, si un usuario hace una búsqueda "GATOS" en uno de sus cuadros de búsqueda, y los resultados de la búsqueda (presumiblemente lindas imágenes de gatos) se cargan a través de AJAX, en la esquina inferior derecha de la página, entonces su el estado de la página no se cambiará. En otras palabras, en el futuro cercano, cuando el usuario decida que quiere volver a su búsqueda de "GATOS", no podrá hacerlo, porque el estado no existe en su historial. Solo podrá volver a hacer clic en su cuadro de búsqueda en blanco.

De ahí la necesidad de la función

history.pushState({},"Results for `Cats`",''url.html?s=cats'');

Está pensado como una forma de permitir que el programador defina específicamente su búsqueda en el historial del usuario. Eso es todo lo que está destinado a hacer.

Cuando la función funciona correctamente, lo único que debe esperar es que la dirección en la barra de direcciones de su navegador cambie a lo que especifique en su URL.

Si ya entiendes esto, entonces perdón por este largo preámbulo. Pero suena por la forma en que plantea la pregunta, que no.

Como comentario adicional, también he encontrado algunas contradicciones entre la forma en que se describe la función en la documentación y la forma en que funciona en la realidad. Encuentro que no es una buena idea usar valores vacíos o en blanco como parámetros.

Ver mi respuesta a esta pregunta SO . Así que recomendaría poner una descripción en su segundo parámetro. De memoria, esta es la descripción que el usuario ve en el menú desplegable, cuando hace clic y mantiene el mouse sobre el botón "Atrás".


La respuesta corta es que history.pushState (no History.pushState , que lanzaría una excepción, la parte de la window es opcional) nunca hará lo que sugiera.

Si las páginas son refrescantes, son causadas por otras cosas que está haciendo (por ejemplo, podría tener un código en ejecución que vaya a una nueva ubicación en el caso de que cambie la barra de direcciones).

history.pushState({urlPath:''/page2.php''},"",''/page2.php'') funciona exactamente como se supone en las últimas versiones de Chrome, IE y Firefox para mí y mis colegas.

De hecho, puede poner lo que quiera en la función: history.pushState({}, '''', ''So long and thanks for all the fish.not a real file'') .

Si publica más código (con especial atención para el código que se encuentra cerca de history.pushState y en cualquier lugar donde se use document.location ), estaremos más que felices de ayudarle a descubrir de dónde proviene exactamente este problema.

Si publica más código, actualizaré esta respuesta (tengo su pregunta favorita) :).


window.history.pushState({urlPath:''/page1''},"",''/page1'')

Solo se carga trabajos después de la página, y cuando haga clic en actualizar no significa que exista una URL real.

Lo que debes hacer aquí es saber a qué URL te redirigen cuando vuelvas a cargar esta página. Y en esa página puede obtener las condiciones obteniendo la URL actual y cumpliendo todas sus condiciones.