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 también cambiaría la URL en el navegador, de modo que si el usuario presiona recargar o marcar, se usa la nueva URL?

También sería bueno que el botón Atrás volviera a cargar la URL original.

Estoy tratando de registrar el estado de JavaScript en la URL.

Con HTML 5, use 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 de botones de retroceso, use history.replaceStateen su lugar.

Si desea que funcione en navegadores que no son compatibles history.pushStatey history.popState, sin embargo, la forma "antigua" es establecer 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), verifique periódicamente para vea si el hash ha cambiado (usando, setIntervalpor ejemplo) y actualice la página. También deberá verificar el valor hash en la carga de la página para configurar el contenido inicial.

Si está utilizando jQuery, hay un complemento de hashchange que utilizará cualquier método que admita el navegador. Estoy seguro de que también hay complementos para otras bibliotecas.

Una cosa a tener en cuenta es colisionar con identificadores en la página, porque el navegador se desplazará a cualquier elemento con una identificación coincidente.

window.location.href contiene la URL actual. Puede leerlo, puede agregarlo y puede reemplazarlo, lo que puede provocar una recarga de la página.

Si, como parece, desea registrar el estado de JavaScript en la URL para que se pueda agregar a favoritos, sin volver a cargar la página, añádala a la URL actual después de un # y haga que un elemento de JavaScript activado por el evento de carga analice el actual URL para ver si contiene estado guardado.

Si usas un? en lugar de un #, forzará una recarga de la página, pero dado que analizará el estado guardado en la carga, esto puede no ser realmente un problema; y esto hará que los botones de avance y retroceso funcionen correctamente también.

Sospecharía firmemente que esto no es posible, porque sería un problema de seguridad increíble si lo fuera. Por ejemplo, podría hacer una página que pareciera una página de inicio de sesión bancaria, ¡y hacer que la URL en la barra de direcciones se parezca al banco real !

Quizás si explican por qué quieren 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]

La configuración de seguridad del navegador evita que las personas modifiquen la URL mostrada directamente. Podrías imaginar las vulnerabilidades de phishing que causarían.

La única forma confiable de cambiar la URL sin cambiar las páginas es usar un enlace interno o hash. por ejemplo: http://site.com/page.html se convierte en http://site.com/page.html#item1 . Esta técnica se usa a menudo en hijax (AJAX + preservar historial).

Al hacer esto, a menudo solo usaré enlaces para las acciones con el hash como href, luego agregaré eventos de clic con jquery que usan el hash solicitado para determinar y delegar la acción.

Espero que eso te ponga en el camino correcto.

jQuery tiene un gran complemento para cambiar la URL de los navegadores, llamado jQuery-pusher .

JavaScript pushStatey jQuery podrían usarse juntos, como:

history.pushState(null, null, $(this).attr('href'));

Ejemplo:

$('a').click(function (event) {

  // Prevent default click action
  event.preventDefault();     

  // Detect if pushState is available
  if(history.pushState) {
    history.pushState(null, null, $(this).attr('href'));
  }
  return false;
});

Usando solo JavaScript history.pushState() , que cambia el referente, que se usa en el encabezado HTTP para los objetos XMLHttpRequest creados después de cambiar el estado.

Ejemplo:

window.history.pushState("object", "Your New Title", "/new-url");

El método pushState ():

pushState()toma tres parámetros: un objeto de estado, un título (que actualmente se ignora) y (opcionalmente) una URL. Examinemos cada uno de estos tres parámetros con más detalle:

1. objeto de estado: el objeto de estado es un objeto de JavaScript que está asociado con la nueva entrada del historial creada por pushState(). Cada vez que el usuario navega al nuevo estado, se dispara un evento popstate y la propiedad de estado del evento contiene una copia del objeto de estado de la entrada del historial.

   El objeto de estado puede ser cualquier cosa que se pueda serializar. Debido a que Firefox guarda los objetos de estado en el disco del usuario para que puedan restaurarse después de que el usuario reinicie su navegador, imponemos un límite de tamaño de 640k caracteres en la representación serializada de un objeto de estado. Si pasa un objeto de estado cuya representación serializada es más grande que esto pushState(), el método arrojará una excepción. Si necesita más espacio que este, le recomendamos que use sessionStorage y / o localStorage.

2. title : Firefox actualmente ignora este parámetro, aunque puede usarlo en el futuro. Pasar la cadena vacía aquí debería estar a salvo de futuros cambios en el método. Alternativamente, puede pasar un título corto para el estado al que se está mudando.

3. URL : este parámetro proporciona la URL de la nueva entrada del historial. 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 su 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()arrojará una excepción. Este parámetro es opcional; si no se especifica, se establece en la URL actual del documento.

Hay un componente Yahoo YUI (Browser History Manager) que puede manejar esto: http://developer.yahoo.com/yui/history/

La galería de fotos de Facebook hace esto usando un #hash en la URL. Aquí hay algunos ejemplos de URL:

Antes de hacer clic en 'siguiente':

/photo.php?fbid=496429237507&set=a.218088072507.133423.681812507&pid=5887027&id=681812507

Después de hacer clic en "siguiente":

/photo.php?fbid=496429237507&set=a.218088072507.133423.681812507&pid=5887027&id=681812507#!/photo.php?fbid=496435457507&set=a.218088072507.133423.681812507&pid=5887085&id=681812507

Tenga en cuenta el hash-bang (#!) Seguido inmediatamente por la nueva URL.

Hay un complemento de jquery http://www.asual.com/jquery/address/

Creo que esto es lo que necesitas.

Lo que funciona para mí es - history.replaceState()función que es la siguiente -

history.replaceState(data,"Title of page"[,'url-of-the-page']);

Esto no volverá a cargar la página, puede usarla con el evento de javascript

Me preguntaba si será posible siempre que la ruta principal en la página sea la misma, solo se le agrega algo nuevo.

Entonces, digamos que el usuario está en la página: http://domain.com/site/page.html entonces el navegador puede dejarme hacerlo location.append = new.html y la página se vuelve: http://domain.com/site/page.htmlnew.htmly el navegador no la cambia.

O simplemente permita que la persona cambie el parámetro get, así que vamos location.get = me=1&page=1.

Entonces la página original se vuelve http://domain.com/site/page.html?me=1&page=1y no se actualiza.

El problema con # es que los datos no se almacenan en caché (al menos no lo creo) cuando se cambia el hash. Por lo tanto, es como cada vez que se carga una nueva página, mientras que los botones de retroceso y avance en una página que no es Ajax pueden almacenar datos en caché y no pasan tiempo en volver a cargar los datos.

Por lo que vi, la historia de Yahoo ya carga todos los datos a la vez. No parece estar haciendo ninguna solicitud de Ajax. Entonces, cuando divse usa a para manejar horas extras de métodos diferentes, esos datos no se almacenan para cada estado del historial.

mi código es:

//change address bar
function setLocation(curLoc){
    try {
        history.pushState(null, null, curLoc);
        return false;
    } catch(e) {}
        location.hash = '#' + curLoc;
}

y acción:

setLocation('http://example.com/your-url-here');

y ejemplo

$(document).ready(function(){
    $('nav li a').on('click', function(){
        if($(this).hasClass('active')) {

        } else {
            setLocation($(this).attr('href'));
        }
            return false;
    });
});

Eso es todo :)

Una respuesta más simple que presento,

window.history.pushState(null, null, "/abc")

esto se agregará /abcdespués del nombre de dominio en la URL del navegador. Simplemente copie este código y péguelo en la consola del navegador y vea que la URL cambia a " https://stackoverflow.com/abc "

He tenido éxito con:

location.hash="myValue";

Simplemente se agrega #myValuea la URL actual. Si necesita activar un evento en la carga de la página, puede usar el mismo location.hashpara verificar el valor relevante. Solo recuerde eliminar #el valor devuelto por location.hashej.

var articleId = window.location.hash.replace("#","");