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

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.

vez que el usuario hace clic en la categoría que quiero cambiar url barra de direcciones del navegador desde

www.mysite.com/products 

a algo así 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?

Answer 1

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 2

Creo que la manipulación directa de la barra de direcciones URL a un completamente diferente sin mover a esa URL no está permitido por razones de seguridad, si está satisfecho con él que es

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 conjeturar que está utilizando asp.net, en ese caso el control de la historia asp.net ajax es un buen lugar para comenzar

Answer 3

Esto no se puede hacer de la manera que está diciendo eso. 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 4

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

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

Answer 5

"window.location.hash"

como sugiere sanchothefat debe ser la única manera 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 6

Con HTML5 se puede modificar la url sin recargar:

Si desea realizar una nueva entrada en la historia del navegador (es decir,botón de retroceso va a funcionar)

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

Si lo que desea es cambiar la url sin ser capaz de volver

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

El objeto puede ser utilizado para el Ajax de navegación:

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

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

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

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