tabla - sobreescribir url con javascript

Cambiar URL en la barra de direcciones del navegador sin volver a cargar la página existente

Question

Posible duplicado:
Modificar la URL sin volver a cargar la página

Estoy buscando una forma de hacer que mis enlaces internos funcionen utilizando mis animaciones javascript actuales, sin hacer que la página se vuelva a cargar cuando haces clic en ellas, pero me gustaría que la URL se actualice en el navegador .

Muchos sitios web hacen esto, aquí hay un buen ejemplo: http://grooveshark.com/#!/search?q=adf

¿Cómo consiguen que la URL se actualice sin la recarga de la página?

Más detalles:

Actualmente, un enlace en mi página se ve como <a href="#aboutus">About Us</a> , esto lo lleva a <div id="aboutus"></div> través de javascript.

El javascript se ve algo así como:

$("#navigation a").click(function(e){
  animate(..scroll to section..);
  e.preventDefault(); // <==========
});

Creo que el "e.preventDefault ()" es lo que está causando que la URL no se actualice, pero ¿cómo evito que el navegador vuelva a cargar la página cuando se cambia la URL?

¿Cómo lo hacen otros sitios web? ¿Cómo se llama este método (para que pueda seguir investigando)?

Gracias.

Answer 1

Me parece que todo está hecho con AJAX. El #! en la URL hace que el navegador interprete el resto de la URL como un anclaje: los anclajes no causan recargas de página (de hecho, el servidor nunca verá en qué ancla está el navegador durante una solicitud HTTP normal) . Cuando la URL cambia, Javascript asume el control, inspecciona la cadena de consulta y carga lo que sea apropiado desde el servidor que utiliza los servicios web.

No lo he analizado demasiado en profundidad, pero así es como me parece.

Answer 2

Aquí hay una pregunta similar .

Aquí hay un ejemplo:

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