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

address-bar

Question

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 desde

www.mysite.com/products

a algo así como

www.mysite.com/products/{selectedCat}

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

Answer 1

"window.location.hash"

como lo sugiere sanchothefat, debería ser la única forma de hacerlo. Debido a todos los lugares que he visto esta característica, es todo el tiempo después de la # en la URL.

Answer 2

Con HTML5 puedes modificar la URL sin volver a cargar:

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 quieres cambiar la URL sin poder volver atrás

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

El objeto se puede usar 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

Answer 3

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á contento con que sea

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

es decir, un enlace de estilo de anclaje dentro de la misma página, luego examine 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 adivinar que está utilizando asp.net, en ese caso, el control de historial asp.net ajax es un buen lugar para comenzar

Answer 4

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

Answer 5

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.

Answer 6

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