Cambie la URL en el navegador sin cargar la nueva página usando JavaScript
¿Cómo podría tener una acción de JavaScript que pueda tener algunos efectos en la página actual pero que también cambie la URL en el navegador, de modo que si el usuario presiona recargar o marcar como favorito, se use la nueva URL?
También sería bueno si el botón Atrás recargara la URL original.
Estoy intentando registrar el estado de JavaScript en la URL.
Si desea que funcione en navegadores que aún no lo admiten history.pushState, history.popStatela forma "antigua" es configurar el identificador de fragmento, lo que no provocará una recarga de la página.
La idea básica es establecer la window.location.hashpropiedad en un valor que contenga cualquier información de estado que necesite, luego usar el evento window.onhashchange o, para navegadores más antiguos que no son compatibles onhashchange(IE < 8, Firefox < 3.6), verificar periódicamente vea si el hash ha cambiado (usando, setIntervalpor ejemplo) y actualice la página. También deberá verificar el valor hash al cargar la página para configurar el contenido inicial.
Si está utilizando jQuery, hay un complemento de cambio de hash que utilizará cualquier método que admita el navegador. Estoy seguro de que también hay complementos para otras bibliotecas.
Una cosa con la que hay que tener cuidado es colisionar con los identificadores de la página, porque el navegador se desplazará a cualquier elemento con un identificador coincidente.
Con HTML 5, utilice la history.pushStatefunción . Como ejemplo:
<script type="text/javascript">
var stateObj = { foo: "bar" };
function change_my_url()
{
history.pushState(stateObj, "page 2", "bar.html");
}
var link = document.getElementById('click');
link.addEventListener('click', change_my_url, false);
</script>
y un href:
<a href="#" id='click'>Click to change url to bar.html</a>
Si desea cambiar la URL sin agregar una entrada a la lista del botón Atrás, utilice history.replaceStateen su lugar.
window.location.href contiene la URL actual. Puede leerlo, agregarlo y reemplazarlo, lo que puede provocar que la página se recargue.
Si, como parece, desea registrar el estado de JavaScript en la URL para que pueda agregarse a favoritos, sin recargar la página, agréguelo a la URL actual después de un # y haga que un fragmento de JavaScript activado por el evento de carga analice el estado actual. URL para ver si contiene el estado guardado.
Si usas un ? en lugar de un #, forzará una recarga de la página, pero dado que analizará el estado guardado al cargar, es posible que esto no sea un problema; y esto hará que los botones de avance y retroceso también funcionen correctamente.
Sospecho fuertemente que esto no es posible, porque sería un problema de seguridad increíble si lo fuera. Por ejemplo, podría crear una página que pareciera la página de inicio de sesión de un banco y hacer que la URL en la barra de direcciones se pareciera a la del banco real .
Quizás si explica por qué quiere hacer esto, la gente podría sugerir enfoques alternativos...
[Editar en 2011: desde que escribí esta respuesta en 2008, ha salido a la luz más información sobre una técnica HTML5 que permite modificar la URL siempre que sea del mismo origen]
