javascript - replacestate - Buen tutorial para usar la API de historial de HTML5(¿Pushstate?)

window history replacestate({}

Question

Estoy buscando utilizar la API de historial de HTML5 para resolver problemas de enlaces profundos con el contenido cargado de AJAX, pero estoy luchando por despegar. ¿Alguien sabe de algún buen recurso?

Quiero usar esto, ya que parece una excelente manera de permitir la posibilidad de que aquellos que se envían los enlaces no tengan encendido JS. Muchas soluciones fallan cuando alguien con JS envía un enlace a alguien que no tiene.

Mi investigación inicial parece apuntar a una API de historia dentro de JS, y al método pushState.

http://html5demos.com/history

Answer 1

Aquí hay un gran elenco de la pantalla sobre el tema por Ryan Bates de Railscasts. Al final, simplemente deshabilita la funcionalidad de ajax si el método history.pushState no está disponible:

http://railscasts.com/episodes/246-ajax-history-state

Answer 2

Es posible que desee echar un vistazo a este plugin jQuery. Ellos tienen muchos ejemplos en su sitio. http://www.asual.com/jquery/address/

Answer 3

La especificación de la historia de HTML5 es peculiar.

history.pushState() no distribuye un evento de estado popstate ni carga una página nueva por sí mismo. Solo pretendía llevar el estado a la historia. Esta es una función de "deshacer" para aplicaciones de una sola página. popstate enviar manualmente un evento de estado popstate o usar history.go() para navegar al nuevo estado. La idea es que un enrutador pueda escuchar eventos popstate y hacer la navegación por usted.

Algunas cosas a tener en cuenta:

• history.pushState() y history.replaceState() no distribuyen eventos popstate .
• history.back() , history.forward() , y los botones atrás y adelante del navegador envían eventos popstate .
• history.go() y history.go(0) realizan una recarga de página completa y no distribuyen eventos de estado popstate .
• history.go(-1) (volver 1 página) e history.go(1) (reenviar 1 página) envían eventos popstate .

Puede usar la API de historial de esta manera para impulsar un nuevo estado Y despachar un evento de estado emergente.

history.pushState({message:''New State!''}, ''New Title'', ''/link''); window.dispatchEvent(new PopStateEvent(''popstate'', { bubbles: false, cancelable: false, state: history.state }));

Luego, escuche los eventos popstate con un enrutador.

Answer 4

Me beneficié mucho con ''Dive in HTML 5''. La explicación y la demostración son más fáciles y directas. Capítulo de historia - http://diveintohtml5.info/history.html y demo de historia - http://diveintohtml5.info/examples/history/fer.html

Answer 5

Para obtener un excelente tutorial, la página de Mozilla Developer Network en esta funcionalidad es todo lo que necesitará: https://developer.mozilla.org/en/DOM/Manipulating_the_browser_history

Lamentablemente, la API de historial de HTML5 se implementa de manera diferente en todos los navegadores HTML5 (lo que la hace incoherente y con errores) y no tiene respaldo para los navegadores HTML4. Afortunadamente, History.js ofrece compatibilidad cruzada para los navegadores HTML5 (lo que garantiza que todos los navegadores HTML5 funcionan como se espera) y opcionalmente ofrece un repliegue de hash para los navegadores HTML4 (incluido soporte mantenido para datos, títulos, pushState y funcionalidad replaceState).

Puede leer más sobre History.js aquí: https://github.com/browserstate/history.js

Para ver un artículo sobre Hashbangs VS Hashes VS HTML5 History API, consulte aquí: https://github.com/browserstate/history.js/wiki/Intelligent-State-Handling

Answer 6

Puedes probar Davis.js , te da el enrutamiento en JavaScript usando pushState cuando esté disponible y sin JavaScript, permite que tu código del lado del servidor maneje las solicitudes.

Answer 7

Tenga en cuenta que al usar HTML5 pushstate si un usuario copia o marca un vínculo profundo y lo visita de nuevo, entonces será un golpe directo al servidor que será 404, por lo que debe estar preparado e incluso una biblioteca js pushstate no ayudará tú. La solución más sencilla es agregar una regla de reescritura a su servidor Nginx o Apache de la siguiente manera:

Apache (en tu vhost si estás usando uno):

<IfModule mod_rewrite.c>
    RewriteEngine On
    RewriteBase /
    RewriteRule ^index/.html$ - [L]
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteRule . /index.html [L]
 </IfModule>

Nginx

rewrite ^(.+)$ /index.html last;

Answer 8

si jQuery está disponible, puedes usar jQuery BBQ

Answer 9

StateRouter.js una abstracción de enrutador muy simple en la parte superior de History.js, llamada StateRouter.js . Está en las primeras etapas de desarrollo, pero lo estoy usando como la solución de enrutamiento en una aplicación de una sola página que estoy escribiendo. Al igual que usted, he encontrado que History.js es muy difícil de entender, especialmente porque soy bastante nuevo en JavaScript, hasta que entendí que realmente necesita (o debería tener) una abstracción de enrutamiento además de resolver un bajo nivel problema.

Este sencillo código de ejemplo debe demostrar cómo se usa:

var router = new staterouter.Router();
// Configure routes
router
  .route(''/'', getHome)
  .route(''/persons'', getPersons)
  .route(''/persons/:id'', getPerson);
// Perform routing of the current state
router.perform();

Aquí hay un pequeño fiddle que he inventado para demostrar su uso.