Header Ads Widget

Ticker

6/recent/ticker-posts

API de historial de HTML5

 La API de historial de HTML5 le permite controlar el historial del navegador desde JavaScript. Por ejemplo, puede agregar entradas en el objeto de historial ( window.history) o establecer la URL de la barra de direcciones de forma dinámica y sin una actualización de página completa (lo que significa que puede navegar entre páginas, del mismo origen, sin ingresar manualmente las URL y presionar Enter ).

Antes de la API de historial de HTML5, los desarrolladores tenían que usar hashURL para cambiar la URL actual ( window.location="#hash") sin volver a cargar la página y crear enrutamiento del lado del cliente en aplicaciones de página única (SPA).

Nowadys y gracias a HTML5 History API, podemos crear SPA complejas y aplicaciones completas que se ejecutan en el lado del cliente sin hash de URL. La mayoría de las bibliotecas del lado del cliente, como React, Vue o Angular, etc., utilizan la API de historial para crear un enrutamiento avanzado que abstrae los detalles internos de esta API en una interfaz de alto nivel que hace que el enrutamiento del lado del cliente sea muy sencillo.

El windowobjeto tiene un historyobjeto que representa el historial del navegador. El objeto proporciona muchos métodos y propiedades que le permiten manipular el historial del usuario, pero como lo haría manualmente usando los botones de ida y vuelta del navegador.

La API HTML5 está disponible en el window.historyobjeto. Simplemente puede abrir la consola de su navegador y escribir lo window.historyque le mostrará el objeto y sus propiedades:

API de historial de HTML5

El objeto History expone muchos métodos:

  • back (): retrocede en la historia, p. ej. window.history.back();
  • forward (): avanza en la historia, p. ej. window.history.forward();
  • go (): carga una página, por su índice de posición relativo a la página actual (índice 0 ), desde el historial de la sesión, por ejemplo, window.history.go(-1);es equivalente a volver a llamar y window.history.go(1);es equivalente a llamar hacia adelante.
  • pushState (): envía un estado a la pila del historial, por ejemplo history.pushState({ foo: "bar" }, "new page", "newpage.html");
  • replaceState (): reemplaza un estado en el estado del historial, por ejemplo history.replaceState({ foo: "bar" }, "new page", "newpage.html");
  • length: almacena la longitud de la pila de historial, p. ej. window.history.length;
  • estado: almacena el estado actual, p. ej. const currentState = history.state;

Desde la consola de Herramientas para desarrolladores, también puede ejecutar los métodos de la API de historial de HTML5 y ver resultados en vivo en su página actual. Comience con una nueva pestaña, abra DevTools (estoy usando Chrome), luego active el panel de la consola y luego ejecute la siguiente línea de código JavaScript:

history.pushState(null, null, 'path');

Esto agregará una cadena de ruta al final de la URL actual https://www.techiediaries.com/path:

API de historial de HTML5

Antes de ejecutar el código anterior, ya lo visité https://www.techiediariesdesde la barra de direcciones.

El primer parámetro del pushState()método son los datos que se pueden pasar al nuevo estado, el segundo parámetro es el título y el tercero es la URL. Tenga en cuenta que no puede pasar URL con orígenes diferentes a la actual; de lo contrario, obtendrá un error de Política de mismo origen que le impedirá acceder a la página. Entonces, si corres:

history.pushState(null, null, 'https://www.google.com');

Obtendrá el siguiente error:

DOMException no detectada: no se pudo ejecutar 'pushState' en 'Historial': no ​​se puede crear un objeto de estado de historial con URL 'https://www.google.com/' en un documento con origen 'https://www.techiediaries.com 'y URL' https://www.techiediaries.com/path2 '.

API de historial de HTML5

Publicar un comentario

0 Comentarios