¿Cómo se puede cambiar la URL de una página sin que la recargue el navegador?

¿Se puede modificar la URL que muestra el navegador sin forzar a que se recargue la página completamente? En concreto me interesa modificar la parte que va detrás del carácter #.

Estás leyendo una traducción autorizada de la pregunta Modify the URL without reloading the page planteada por Jarvis en StackOverflow.

Respuestas

Lo que quieres hacer ahora es muy sencillo gracias a que los navegadores que soportan HTML5 incluyen dos métodos llamados history.pushState() y history.replaceState(). El primero añade una nueva entrada al historial del navegador y el segundo método puede modificar la entrada actual del historial.

Así por ejemplo, puedes modificar el historial del navegador y la URL que se muestra justo después de procesar una llamada Ajax:

function processAjaxData(response, urlPath){
    document.getElementById("contenido").innerHTML = response.html;
    document.title = response.pageTitle;
    window.history.pushState({
        "html": response.html,
        "pageTitle": response.pageTitle
    }, "", urlPath);
}

También te puede ser útil el método onpopstate para detectar cuando el usuario pulsa en el botón Anterior o Siguiente del navegador:

window.onpopstate = function(e) {
    if(e.state){
        document.getElementById("contenido").innerHTML = e.state.html;
        document.title = e.state.pageTitle;
    }
};

@librosweb

6 octubre 2014, 22:42