w3schools replacestate mdn example event ejemplo change javascript html5 pushstate html5-history

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



window history replacestate({} (9)

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

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.

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

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.

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;

si jQuery está disponible, puedes usar jQuery BBQ

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.