2011-05-25 16 views
21

¿Cómo cambio la URL sin actualizar la página?¿Cómo puedo cambiar la URL de la página sin actualizar la página?

He creado un sitio web con CodeIginer y deseo implementar AJAX y JQuery en una de mis páginas. El problema es; cuando cargo el contenido, la URL no cambia.

Digamos que tengo la URL http://www.example.com/controller/function/param
Y otra URL: http://www.example.com/controller/function/param2

¿Cómo puedo cambiar la primera dirección URL a la segunda cuando hago clic en un botón?

Respuesta

27

En HTML5 puede cambiar la URL:

window.history.pushState("object or string", "Title", "/new-url"); 

cheque http://spoiledmilk.com/blog/html5-changing-the-browser-url-without-refreshing-page/

docs: https://developer.mozilla.org/en/DOM/Manipulating_the_browser_history#The_pushState().c2.a0method


ACTUALIZACIÓN

Una visión general de lo que sup navegador puerto de la nueva API HTML5 historia:

http://caniuse.com/#search=pushState (caniuse.com la pena marcador!)

ya hay marcos que hacen el trabajo duro para usted e incluso con gracia de repliegue a la solución de hash-tag común:

History.js

History.js apoya con gracia la historia de HTML5/Estado API (pushState, replaceState, onPopState) en todos los navegadores. Incluyendo soporte continuo para datos, títulos, replaceState. Admite jQuery, MooTools y Prototype. Para los navegadores HTML5, esto significa que puede modificar la URL directamente, sin la necesidad de utilizar hashes. Para navegadores HTML4, volverá a utilizar la funcionalidad anterior onhashchange .

Backbone.js

Backbone estructura de suministros a las aplicaciones de JavaScript pesadas por proporcionan modelos con unión clave-valor y eventos personalizados, colecciones con una rica API de funciones enumerables, vistas con el evento declarativa manipulación , y lo conecta todo a su aplicación existente sobre una interfaz RESTful JSON . ... El soporte de pushState existe sobre una base puramente opt-in en Backbone. Los navegadores antiguos que no son compatibles con pushState continuarán utilizando fragmentos de URL basados ​​en hash, y si una dirección URL hash es visitada por un explorador compatible con pushState , se actualizará de forma transparente a la URL verdadera.

Mootools (via Plugin)

MooTools es un sistema modular, marco compacto, orientado a objetos JavaScript diseñado para el intermedio a avanzado desarrollador de JavaScript. [...] Administración de historia a través de popstate o hashchange. Reemplaza la URL de la página sin una recarga y vuelve a Hashchange en los navegadores antiguos .

dojo toolkit

Dojo ahorra tiempo y escalas con su proceso de desarrollo, utilizando estándares web como su plataforma. Es el conjunto de herramientas con el que los desarrolladores experimentados recurren para crear aplicaciones web de escritorio y móviles de alta calidad . [...] dojox.app administra el historial de navegación a través del estándar pushState HTML5 y lo delega al explorador habilitado administración del historial.

... solo por nombrar algunos.


(!!) Conocer

Una importante efecto secundario cuando se utiliza el pushState (cita del Backbone documentation):

Tenga en cuenta que el uso de URLs reales requiere su servidor web para poder renderizar correctamente esas páginas, por lo que se requieren cambios de fondo como bien. Por ejemplo, si tiene una ruta de/documents/100, su servidor web debe poder servir esa página, si el navegador visita esa URL directamente. Para el rastreo completo del motor de búsqueda, es mejor tener el servidor generando el HTML completo para la página ... pero si se trata de una aplicación web , simplemente renderizando el mismo contenido que tendría para la URL raíz y completando el el resto con Vistas Backbone y JavaScript funciona bien.

+0

Eso es genial .. Gracias por su ayuda. Y gracias a todos los que comenten en este hilo ... :) –

+0

Solo para que lo sepan, con mi experiencia con history.pushState, no se degrada graciosamente, y no funciona en IE9, realmente rompió mis guiones. asegúrese de implementar una solución, o use document.location.hash en su lugar. podrías usar modernizer.js para detectar si el navegador lo admite. – mcbeav

9

Podría usar hash (#) y ponga lo que quiera después.

Aquí es un sitio que construí usando esto - y luego tengo JavaScript leer el hash y llamar a las funciones apropiadas: nota

http://bannerhouse.com.au/#/popup=media&id=don

lateral:

Esto es útil para sitios web Flash o contenido flash también; puede usar FlashVars para analizar el valor hash del archivo SWF y cargar una sección/pantalla apropiada en función de eso.

+0

Buen truco. No sabía esto antes. – Pwnna

+0

Gracias, salvaste mi vida .. !!! –

4

etiquetas Uso de hash a través de JavaScript, por lo que en controlador de eventos Click del botón: location.hash = "param2" que cambiará http://example.com/mypage/#whatever a http://example.com/mypage/#param2

Por supuesto, también se puede poner sus "carpetas" después de que el hachís, Por lo tanto, con una URL base de http://example.com/ a continuación, añadir: location.hash = "/MyPage/MySubPage/MyInfo"; que cambia a http://example.com/#/MyPage/MySubPage/MyInfo

+0

cuando lo intenté, la primera url 'http: // www.example.com/controller/function/param' se convirtió en' http://www.example.com/controller/function/param/#/controller/function/ param2' y si presiono enter en la URL, obtuve el mismo contenido con la primera URL ... ¿Cómo cambio el contenido a la segunda cuando presiono la URL? –

1

un similar thread dedujo no, a menos que use una etiqueta hash.

Una idea presentada pero fuertemente desaconsejada, fue el uso de una respuesta HTTP 204.

Desde el W3:

sin respuesta 204

servidor ha recibido la petición, pero no existe información para enviar de vuelta, y el cliente debe permanecer en la misma vista documento. Esto es principalmente para permitir la entrada para scripts sin cambiar el documento al mismo tiempo.

Cuestiones relacionadas