javascript cambiar - Actualizar la barra de direcciones con una nueva URL sin hash o recargar la página




window without (4)

Cambiando solo lo que está después de hash - navegadores antiguos

document.location.hash = 'lookAtMeNow';

Cambiando la URL completa. Chrome, Firefox, IE10 +

history.pushState('data to be passed', 'Title of the page', '/test');

Lo anterior agregará una nueva entrada al historial para que pueda presionar el botón Atrás para pasar al estado anterior. Para cambiar la URL en su lugar sin agregar una nueva entrada al uso del historial

history.replaceState('data to be passed', 'Title of the page', '/test');

Intenta ejecutar estos en la consola ahora!

O bien soñé con Chrome (canal de desarrollo) implementando una forma de actualizar la barra de direcciones mediante javascript (la ruta, no el dominio) sin volver a cargar la página o realmente lo han hecho.

Sin embargo, no puedo encontrar el artículo que creo haber leído.

¿Estoy loco o hay una manera de hacer esto (en Chrome)?

ps no estoy hablando de window.location.hash, et al. Si existe lo anterior, la respuesta a esta pregunta será falsa.


La actualización a la respuesta de Davids para detectar incluso los navegadores no es compatible con pushstate:

if (history.pushState) {
  window.history.pushState("object or string", "Title", "/new-url");
} else {
  document.location.href = "/new-url";
}

¡Ahora puedes hacer esto en la mayoría de los navegadores "modernos"!

Aquí está el artículo original que leí (publicado el 10 de julio de 2010): HTML5: cambio de la URL del navegador sin actualizar la página .

Para obtener información más detallada sobre pushState / replaceState / popstate (también conocida como la API de historial de HTML5), consulte los documentos de MDN .

TL; DR, puedes hacer esto:

window.history.pushState("object or string", "Title", "/new-url");

Vea mi respuesta para modificar la URL sin volver a cargar la página para obtener instrucciones básicas.


La mayoría de las personas conocen las propiedades de la URL en document.location. Eso es genial si solo estás interesado en la página actual. Pero la pregunta era acerca de poder analizar los anclajes en una página, no en la página en sí.

Lo que la mayoría de la gente parece pasar por alto es que esas mismas propiedades de URL también están disponibles para elementos de anclaje:

// To process anchors on click    
jQuery('a').click(function () {
   if (this.hash) {
      // Clicked anchor has a hash
   } else {
      // Clicked anchor does not have a hash
   }
});

// To process anchors without waiting for an event
jQuery('a').each(function () {
   if (this.hash) {
      // Current anchor has a hash
   } else {
      // Current anchor does not have a hash
   }
});




javascript ajax google-chrome