¿Cómo modifico la URL sin recargar la página?
¿Hay alguna manera de modificar la URL de la página actual sin recargar la página?
Me gustaría acceder a la parte anterior. al hash #.
Solo necesito cambiar la parte después del dominio, por lo que no es como si estuviera violando las políticas entre dominios.
window.location.href = "www.mysite.com/page2.php"; // this reloads
¡Esto ahora se puede hacer en Chrome, Safari, Firefox 4+ e Internet Explorer 10pp4+!
Consulte la respuesta de esta pregunta para obtener más información: Actualizar la barra de direcciones con una nueva URL sin hash o recargar la página
Ejemplo:
function processAjaxData(response, urlPath){
document.getElementById("content").innerHTML = response.html;
document.title = response.pageTitle;
window.history.pushState({"html":response.html,"pageTitle":response.pageTitle},"", urlPath);
}
Luego puede usar window.onpopstateo window.addEventListenerpara detectar la navegación del botón hacia atrás/adelante:
window.addEventListener("popstate", (e) => {
if(e.state){
document.getElementById("content").innerHTML = e.state.html;
document.title = e.state.pageTitle;
}
});
Para obtener una visión más profunda de la manipulación del historial del navegador, consulte este artículo de MDN .
HTML5 introdujo los métodos history.pushState()y history.replaceState(), que le permiten agregar y modificar entradas del historial, respectivamente.
window.history.pushState('page2', 'Title', '/page2.php');
Lea más sobre esto desde aquí.
También puedes usar HTML5 replaceState si quieres cambiar la URL pero no quieres agregar la entrada al historial del navegador:
if (window.history.replaceState) {
//prevents browser from storing history with each change:
window.history.replaceState(statedata, title, url);
}
Esto "rompería" la funcionalidad del botón Atrás. Esto puede ser necesario en algunos casos, como en una galería de imágenes (donde desea que el botón Atrás regrese a la página de índice de la galería en lugar de retroceder a través de todas y cada una de las imágenes que vio) mientras le da a cada imagen su propia URL única.
Aquí está mi solución (newUrl es su nueva URL que desea reemplazar con la actual):
history.pushState({}, null, newUrl);
