Pregunta Modificar la URL sin volver a cargar la página


¿Hay alguna manera de que pueda modificar la URL de la página actual sin volver a cargar la página?

Me gustaría acceder a la porción antes de el # hash si es posible.

Solo necesito cambiar la porción después el dominio, por lo que no es como si estuviera violando las políticas de dominios cruzados.

 window.location.href = "www.mysite.com/page2.php";  // sadly this reloads

1806
2018-05-05 10:54


origen


Respuestas:


¡Esto ahora se puede hacer en Chrome, Safari, FF4 + e IE10pp4 +!

Vea la respuesta de esta pregunta para más información: Actualizando la barra de direcciones con una nueva URL sin hash o recargando 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);
 }

Puedes usar window.onpopstate para detectar la navegación del botón atrás / adelante:

window.onpopstate = function(e){
    if(e.state){
        document.getElementById("content").innerHTML = e.state.html;
        document.title = e.state.pageTitle;
    }
};

Para una mirada más profunda a la manipulación de la historia del navegador, vea este artículo de MDN.


1628
2017-07-28 15:30



HTML5 introdujo el history.pushState() y history.replaceState() métodos, que le permiten agregar y modificar entradas de historial, respectivamente.

window.history.pushState('page2', 'Title', '/page2.php');

Lea más sobre esto de aquí


381
2017-08-17 13:59



NOTA: Si está trabajando con un HTML5 navegador, entonces debes ignorar esta respuesta. Esto ahora es posible, como se puede ver en las otras respuestas.

No hay forma de modificar el URL en el navegador sin volver a cargar la página. La URL representa la última página cargada. Si lo cambias (document.location) luego volverá a cargar la página.

Una razón obvia es que escribes un sitio en www.mysite.com que se parece a una página de inicio de sesión del banco. Luego, cambia la barra de direcciones del navegador para decir www.mybank.com. El usuario ignorará por completo que realmente están mirando www.mysite.com.


96
2018-05-05 10:57



También puedes usar HTML5 replaceState si desea cambiar la URL, pero no desea 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 de retroceso. Esto puede ser necesario en algunos casos, como 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 visualizó) mientras le da a cada imagen su url única.


93
2017-11-19 10:32



parent.location.hash = "hello";

73
2018-05-13 22:14



Aquí está mi solución: (newUrl es tu nueva url que quieres reemplazar la actual)

history.pushState({}, null, newUrl);

44
2018-06-10 18:25



El HTML5 replaceState es la respuesta, como ya lo mencionaron Vivart y geo1701. Sin embargo, no es compatible con todos los navegadores / versiones. History.js ajusta las características de estado de HTML5 y proporciona soporte adicional para los navegadores HTML4.


25
2017-11-21 11:09