Demo de la API de la historia de HTML5

He estado leyendo sobre la API de historial de HTML5 y hasta ahora, no he encontrado una demostración de trabajo simple que muestre la mecánica con código.

Aquí hay un jsfiddle que funciona: 4 botones y 4 divs. Cuando el usuario presiona un botón, muestra el panel correspondiente.

Lo que estoy buscando hacer es:

1) rewrite the URL so that when the user is on panel 4 the url ends with /Panel4 2) make the back button and forward button work with the history API. 

Sé que hay el plugin history.js pero quiero entender cómo funciona la API en su forma más simple.

Con suerte, el jsfiddle ayudará a otros que vendrán a esta página en busca de una demostración de código.

Gracias.

3 Solutions collect form web for “Demo de la API de la historia de HTML5”

Ok, he hecho este ejemplo para ti. Comience con el código HTML ( index.html ):

 < !DOCTYPE html>   Stackoverflow       
Action:
Url:
Description:

Y luego el archivo javascript ( sof.js ):

var menu, url, description, action, data, historyState, act;

 function $ (id) {return document.getElementById (id);} // Updates infos function update (state) { action.innerHTML = act; url.innerHTML = state.url; description.innerHTML = state.description; } // Goes back function back () { act = 'Back'; history.back (); } // Goes forward function ff () { act = 'Forward'; history.forward (); } function load () { menu = $ ('menu'); url = $ ('url'); description = $ ('description'); action = $ ('action'); // State to save historyState = { home: { description: 'Homepage' } , about: { description: 'Infos about this website' } , blog: { description: 'My personal blog' } , photos: { description: 'View my photos' } }; // This is fired when history.back or history.forward is called window.addEventListener ('popstate', function (event) { var hs = history.state; if ((hs === null) || (hs === undefined)) hs = event.state; if ((hs === null) || (hs === undefined)) hs = window.event.state; if (hs !== null) update (hs); }); menu.addEventListener ('click', function (event) { var el = event.target; // Prevents url reload event.preventDefault (); // Handles anchors only if (el.nodeName === 'A') { // Gets url of the page historyState[el.innerHTML].url = el.getAttribute ('href'); // Creates a new history instance and it saves state on it history.pushState (historyState[el.innerHTML], null, el.href); act = 'Normal navigation'; update (historyState[el.innerHTML]); } }); // Handles first visit navigation var index = location.pathname.split ('/'); index = index[index.length-1]; if (index !== '') { historyState[index].url = location.pathname; history.pushState (historyState[index], null, location.pathname); act = 'First visit'; update (historyState[index]); } } 

Y un .htaccess para solicitud directa:

 RewriteEngine On RewriteRule ^home$ ./index.html RewriteRule ^about$ ./index.html RewriteRule ^blog$ ./index.html RewriteRule ^photos$ ./index.htm 

Cada vez que se hace clic en un ancla, se empuja una nueva instancia de historial en la stack de historial y se guarda un objeto (llamado estado) con ella: se cambia la url local, pero la carga se detiene con el método ‘event.preventDefault ()’. Además, se actualiza alguna información (como URL, Descripción y Acción).

Luego, con los botones “Atrás” y “Adelante”, puede viajar a través del historial y usar “history.state” (o event.state o window.event.state, depende de los navegadores) para recuperar el estado actual.

Y, al final, si escribe la url completa directamente en la barra de direcciones, funciona igual que con el .htaccess anterior;)

Espero que este ejemplo te ayude;)

Ciao

Wilk

PS: Para más detalles:

  1. Manipulando el historial del navegador.
  2. Objeto de historia
  3. Cómo hacer historia

Ok, creé lo que creo que es la forma más simple de la demostración de la API de historial.

No puede funcionar en jsfiddle porque necesita ejecutarse en su propia ventana. Sin embargo, funcionará si copia y pega el código en el bloc de notas, agrega una referencia a jquery donde se indica y lo guarda en su escritorio como un archivo html. Por supuesto, no funciona en IE, pero todos lo sabemos. He puesto dos versiones: la que funciona sin el componente de reescritura de URL (funcionará desde su escritorio) y también he comentado la versión donde puede manipular la URL. Para este último, debe ejecutarlo desde un servidor, ya sea remoto o local.

¡He luchado para que funcione en todos los navegadores porque Chrome, Safari y Firefox funcionan de manera diferente! Aquí está el código:

     // add reference to jquery.js file here //         
panel 1
panel 2
panel 3
panel 4

Upvote si te funciona.

¡Disfrutar!

Aquí puede ver un ejemplo simple de la API del historial de HTML5: https://stackoverflow.com/a/9470183/1236238

  • Borrar historial html creado por pushState al actualizar
  • history.back () no funciona con la API de historial de HTML5 como se esperaba en Chrome
  • Diferencia entre el button Atrás presionado y el button Avanzado presionado con la API de Historial
  • No carga un file JS para una ruta específica
  • Habilitación de History API con tablas de datos
  • Buen tutorial para usar la API de historial de HTML5 (¿Pushstate?)
  • ¿Cómo evitar que iframe modifique el context de navigation de nivel superior (top.history)?
  • Historial de HTML5 con formulario AJAX
  • Es necesario hacer clic dos veces para volver al historial (usando pushState)
  • ¿La API de Historial es consistente en los browseres modernos?
  • Ruta angular con html5Mode que muestra la página 'No encontrado' después de volver a cargar
  • ¿Es posible establecer el atributo href de una label base en AngularJs?
  • deja de disparar popstate en hashchange
  • Javascript tiene muchos buenos JS marco (como Node.js AngularJS Vue.js React.js) es el mejor lenguaje de script.