2012-06-08 16 views
24

Duplicar posibles:
Modify the URL without reloading the pageCambio URL en el navegador barra de direcciones sin recarga de la página existente

Estoy buscando una manera de hacer mis enlaces internos funcional utilizando mis animaciones javascript actuales, sin hacer que la página se vuelva a cargar cuando hace clic en ellos - , pero me gustaría que la URL se actualice en el navegador.

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

¿Cómo consiguen la URL para actualizar la página sin recarga?


Más detalles:

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

El Javascript se ve algo como:

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

creo que el "e.preventDefault()" es lo que está causando la URL a no ser actualizado, pero ¿cómo puedo evitar que el navegador de volver a cargar la página cuando la URL ha cambiado?

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

gracias.

+1

también puede ser útil: https://developer.mozilla.org/en/DOM/Manipulating_the_browser_history –

Respuesta

23

Here is a similar question.

Aquí se muestra 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 
    ); 
} 
+1

Ah sí, el estado de empuje parece ser la pieza que falta del rompecabezas. Muchas gracias –

+0

su amigo bienvenido;) –

1

A mi me parece como si toda la cosa se hace 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 en el curso de un HTTP normal) solicitud). 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 visto demasiado a fondo, pero así es como me parece.

Cuestiones relacionadas