Actualizar URL sin recargar la página usando JavaScript

En esta publicación, aprenderemos cómo actualizar la URL sin recargar la página usando JavaScript. Veremos cómo usar la API History para manipular el historial del navegador y la URL, y cómo manejar eventos popstate para actualizar el contenido de nuestra página.

Actualizar la URL de una página web sin recargarla es una tarea común que nos podemos encontrar en el desarrollo web. Por ejemplo, es posible que queramos cambiar la URL para reflejar el estado actual de la página, como filtrado, clasificación o paginación. Sin embargo, cambiar la URL de una página web suele provocar una recarga de la página, lo que puede resultar indeseable por varios motivos. Por ejemplo, recargar la página puede provocar parpadeos, problemas de rendimiento o pérdida de la entrada del usuario. Por lo tanto, necesitamos una forma de actualizar la URL sin recargar la página.

Afortunadamente, los navegadores modernos admiten una función HTML5 llamada History API, que nos permite manipular el historial del navegador y la URL sin recargar la página. En esta publicación, aprenderemos cómo usar esta función en JavaScript para actualizar la URL sin recargar la página.

1. Descripción general de la API de historial

La API de Historia es un conjunto de métodos y propiedades que nos permiten interactuar con el historial del navegador y la URL. El historial del navegador es una pila de URL que el usuario ha visitado en una pestaña del navegador. El usuario puede navegar por el historial usando los botones de avance y retroceso, o usando atajos de teclado. La API de Historia nos permite:

Obtenga el objeto de estado actual de la entrada del historial usando history.state.
Inserte un nuevo objeto de estado y una URL en la pila del historial usando history.pushState(state, title, url).
Reemplace el objeto de estado actual y la URL en la pila del historial usando history.replaceState(state, title, url).
Extraiga un objeto de estado y una URL de la pila del historial usando history.back(), history.forward(), o history.go(delta).

los state El objeto es un objeto JavaScript arbitrario que puede almacenar algunos datos relacionados con la URL. Se puede recuperar usando history.state o desde el objeto de evento popstate. El title Actualmente, la mayoría de los navegadores ignoran el argumento, pero es posible que se utilice en el futuro. El url El argumento es una URL relativa o absoluta que se mostrará en la barra de direcciones.

2. Actualizar URL sin recargar la página

Hay dos formas en HTML5 que pueden actualizar la URL de la página web actual: usando History.pushState() y History.replaceState(). Vamos a discutir estos en detalle:

1. Usando `History.pushState()` función

Para crear una nueva entrada en el historial del navegador y actualizar la URL, podemos usar History.pushState() método. Esto permitirá al usuario volver a la URL anterior usando el botón Atrás. Toma el estado, el título y la URL como parámetro. Podemos llamarlo usando el objeto de historial de la ventana DOM, es decir, window.history. Aquí hay un ejemplo:

const state = {page: "contact"};

const title = "Contact";

const url = "/contact";

// Supongamos que la URL actual es https://www.techiedelight.com/home

// Envía un nuevo objeto de estado y URL a la pila del historial

history.pushState(state, title, url);

// La nueva URL es https://www.techiedelight.com/contact

Tenga en cuenta que el navegador no intentará cargar la URL. Dado que se crea una nueva entrada en el historial, podemos presionar el botón Atrás para visitar la última URL.

2. Usando `History.replaceState()` función

Para modificar la entrada actual en el historial del navegador y actualizar la URL, podemos usar History.replaceState() método. Esto sobrescribirá la URL anterior y evitará que el usuario vuelva a ella usando el botón Atrás. Por ejemplo:

const state = {page: "contact"};

const title = "Contact";

const url = "/contact";

// Supongamos que la URL actual es https://www.techiedelight.com/home

// Reemplazar el objeto de estado actual y la URL en la pila del historial

history.pushState(state, title, url);

// La nueva URL es https://www.techiedelight.com/contact

En ambos casos, podemos acceder al objeto de estado y a la URL usando history.state y location.href. Por ejemplo:

// Obtener el objeto de estado actual y la URL

console.log(history.state); // {página: 'contacto'}

console.log(location.href); // https://www.techiedelight.com/contact

También podemos usar cualquier URL relativa o absoluta válida como argumento para pushState o replaceState. Sin embargo, no podemos cambiar el origen de la URL (el protocolo, el nombre de dominio y el número de puerto), ya que esto violaría la política del mismo origen. Por ejemplo:

// URL válidas

history.pushState(null, null, "/home");

history.pushState(null, null, "?query=foo");

history.pushState(null, null, "#section");

history.pushState(null, null, "https://www.techiedelight.com/contact");

// URL no válidas

// Resulta en error: DOMException: No se pudo ejecutar 'pushState' en 'Historial'

history.pushState(null, null, "https://www.techiedelight.org/home");

history.pushState(null, null, "https://www.techiedelight.com/home");

history.pushState(null, null, "https://www.techiedelight.com:8080/home");

3. Manejo de eventos Popstate en JavaScript

Cuando el usuario navega por el historial usando los botones atrás o adelante, o usando atajos de teclado, aparece un popstate Se dispara el evento. Podemos escuchar este evento usando window.addEventListener('popstate', handler), dónde handler es una función que se ejecutará cuando ocurra el evento. El popstate objeto de evento tiene un state propiedad que contiene el state objeto de la entrada del historial a la que navegó el usuario. Podemos usar esta propiedad para actualizar el contenido de nuestra página o realizar algunas acciones basadas en la state objeto.

Sin embargo, el evento popstate solo se activa mediante la navegación iniciada por el usuario, no por pushState o replaceState. Por lo tanto, es posible que queramos llamar a nuestra función de controlador manualmente después de usar pushState o replaceState para actualizar el contenido de nuestra página en consecuencia. Por ejemplo:

// Definir una función de controlador

function popStateHandler(event) {

var state = event.state;

if (state) {

alert("We are on the " + state.page + " page.");

} else {

alert("Welcome to the home page.");

}

// Escuche eventos popstate

window.addEventListener('popstate', popStateHandler);

// Envía un nuevo objeto de estado y URL a la pila del historial

history.pushState({page: "contact"}, "Contact", "/contact");

// Llama a la función del controlador manualmente

popStateHandler({state: {page: "contact"}});

Se trata de actualizar la URL en la barra de direcciones sin recargar la página actual usando JavaScript.