¿Hay alguna forma de cambiar la barra de direcciones del navegador sin actualizar la página?

91

Estoy desarrollando una aplicación web. En él tengo una sección llamada categorías que cada vez que un usuario hace clic en una de las categorías, un panel de actualización carga el contenido apropiado.

Después de que el usuario hizo clic en la categoría, quiero cambiar la URL de la barra de direcciones del navegador de

www.mysite.com/products

a algo como

www.mysite.com/products/{selectedCat}

sin actualizar la página.
¿Existe algún tipo de API de JavaScript que pueda usar para lograr esto?

url address-bar

— Luiso
fuente

157

Con HTML5 puede modificar la URL sin recargar:

Si desea hacer una nueva publicación en el historial del navegador (es decir, el botón Atrás funcionará)

window.history.pushState('Object', 'Title', '/new-url');

Si solo desea cambiar la URL sin poder retroceder

window.history.replaceState('Object', 'Title', '/another-new-url');

El objeto se puede utilizar para la navegación ajax:

window.history.pushState({ id: 35 }, 'Viewing item #35', '/item/35');

window.onpopstate = function (e) {
  var id = e.state.id;
  load_item(id);
};

Lea más aquí: http://www.w3.org/TR/html5-author/history.html

Una solución alternativa: https://github.com/browserstate/history.js

— Alfredo
fuente

4

+1 También tenga en cuenta; estos cambian el pathy / o query stringen la URL; no pueden cambiar el protocolo, el dominio o el puerto (ya que eso sería un problema de seguridad como otros han señalado). La hashfunción anterior puede cambiar el ancla (o la identificación del fragmento)

— Chris S

2

solo digo, en su ejemplo '/ item / 35'}, hay un extra} agregado

— Zhanger

Solo como pregunta al margen, ¿hay alguna manera de permitir que estas URL se indexen en Google?

— Peter Featherstone

1

Una mejor biblioteca parece ser github.com/browserstate/history.js , se mantiene activamente y se usa ampliamente, mientras que fortes-history.js estuvo inactivo durante 3 años.

— Gonfi den Tschal

2

Tenga en cuenta que Firefox no es compatible con el título, así que use document.title = "nuevo título".

— 0fnt

31

Para agregar a lo que los chicos ya han dicho, edite la propiedad window.location.hash para que coincida con la URL que desea en su función onclick.

window.location.hash = 'category-name'; // address bar would become http://example.com/#category-name

— roborourke
fuente

¿Hay alguna forma de cambiar la URL sin el símbolo '#' en la URL?

— SHEKHAR SHETE

7

Creo que manipular directamente la barra de direcciones a una URL completamente diferente sin moverse a esa URL no está permitido por razones de seguridad, si está satisfecho con que sea

www.mysite.com/products/#{selectedCat}

es decir, un enlace de estilo ancla dentro de la misma página y luego busque en los diversos scripts de historial / "botón de retroceso" que ahora están presentes en la mayoría de las bibliotecas de JavaScript.

La mención del panel de actualización me lleva a suponer que está usando asp.net, en ese caso, el control del historial de asp.net ajax es un buen lugar para comenzar

— Justin Wignall
fuente

3

No creo que esto sea posible (al menos cambiar a una dirección totalmente diferente), ya que sería un mal uso no intuitivo de la barra de direcciones y podría promover ataques de phishing.

— Galwegian
fuente

En lugar de ser poco intuitivo, creo que no debería poder hacerlo porque podría usarse incorrectamente para ataques de phishing. De todos modos, eso es +1.

— OregonGhost

Sí, se me acaba de ocurrir. No es Buena idea. Gracias OregonGhost.

— Galwegian

1

Yo no creo que es posible ... Salida Wikimapia ... A medida que arrastra el mapa alrededor, la URL se cambia ...

— Shivasubramanian Un

@ Shivasubramanian-a: miré Wikimapia y, de hecho, solo usan la técnica sugerida por somej y descrita por sanchothefat: simplemente cambiando el nombre del ancla. Que es seguro contra el phishing ...

— PhiLho

-1

Esto no se puede hacer de la forma en que lo dice. El método sugerido por somej.net es el más cercano que puede obtener. En realidad, es una práctica muy común en la era AJAX. Incluso Gmail usa esto.

— aalaap
fuente

-1

"window.location.hash"

como sugiere sanchothefat debería ser la única forma de hacerlo. Porque en todos los lugares en los que he visto esta función, es todo el tiempo después del # en la URL.