javascript - reescribir - ¿Cómo cambiar dinámicamente la URL sin recargar?

reescribir url javascript

Question

OK, esto es lo que estoy tratando de hacer (creo que Google también lo hace principalmente):

Escenario A:

En la página /Main_Page digamos que hay 3 secciones. Cuando el usuario hace clic en la sección A "enlace", el contenido de la section A se carga a través de AJAX y se incrusta en la página.

Escenario B:

Cuando se /Main_Page/Section_A , prácticamente vamos a la misma página (como en el escenario A) - /Main_Page y /Main_Page Section A través de AJAX - como antes.

El problema :

Tenemos 2 páginas resultantes idénticas, pero la URL es diferente (en el primer caso será solo /Main_Page , mientras que en la segunda será /Main_Page/Section_A ).

Lo que quiero hacer :

• En el Escenario A, después de cargar la Section A través de AJAX, ¿cómo debo hacerlo para que la URL que aparece (en la barra de direcciones del navegador) sea /Main_Page/Section_A (o cualquier otra cosa), sin ningún tipo de redireccionamiento, recarga de página? , etc?

Answer 1

Acabo de encontrar un tutorial y me funcionó,

$(''a'').click(function(){
var value = $(this).attr(''id'');
window.location.hash = value; // it appends id to url without refresh
});
$(window).bind(''hashchange'' function() {
var newhash = window.location.hash.substring(1) // it gets id of clicked element
// use load function of jquery to do the necessary...
});

obtuve el código anterior de http://css-tricks.com/video-screencasts/85-best-practices-dynamic-content/

Answer 2

Su problema se puede resolver implementando la API de historial , especialmente utilizando el método pushState() . Recomiendo leer sobre esto en MDN . También hay una solución todo en uno llamada History.js , que te ayudará a implementarlo fácilmente en el navegador x (se reducirá a los hashes de URL # si el navegador no lo admite).

Aquí hay un ejemplo:

history.pushState('''', ''New Page Title'', newHREF);

¿No lo suficientemente emocionado? Aquí hay una demo que te animará a implementarla.