Cómo modificar la URL en JavaScript sin recargar la página

Cambiar la URL sin recargar la página puede ser una estrategia muy útil para crear sitios web más emocionantes y dinámicos utilizando JavaScript. Por ejemplo, crear un sitio web de una sola página donde el usuario interactúa con diferentes porciones/secciones del sitio web sin navegar/redirigir a una nueva página es un caso de uso común para cambiar la URL sin recargar la página. Que puede resultar en una experiencia de usuario más consistente y receptiva.

Este artículo describirá los métodos para modificar la URL sin recargar la página web utilizando JavaScript.

Cómo modificar/cambiar la URL en JavaScript sin recargar la página?

Para modificar la URL sin recargar la página web, use el siguiente método predefinido de JavaScript:

• Método PushState ()
• método reemplazar ()

Método 1: Modifique la URL en JavaScript sin recargar la página usando el método "PushState ()"

Para modificar la URL sin recargar la página web, use el "PushState ()" método. Es una característica o el método predefinido del "objeto de historia"Eso permite cambiar el historial del navegador sin navegar o actualizar la página. Simplemente agrega o modifica la pila del historial y no carga una nueva página. Al usar este enfoque, puede cambiar de un lado a otro entre las páginas agregando una nueva entrada a la pila de historial del navegador.

Sintaxis
Siga la sintaxis dada para el método "PushState ()":

ventana.historia.PushState (estado, título, URL);

Aquí:

• "estado"Representa la nueva entrada del historial.
• "título"Es el texto particular que se puede mostrar en la barra de título del navegador.
• "url"Indica la URL reemplazada como una nueva entrada.

Ejemplo
En un archivo HTML, cree cuatro botones que llamen al "ModifyUrl ()"Función en el botón Haga clic:

1
2
3
4

Defina una función "ModifyUrl ()"En un archivo JavaScript que se activará en el botón Haga clic. Se necesitan dos parámetros, el "título" y el "url". Cuando se llama al método en el clic del botón, el "título" y la "URL" se pasarán como argumentos. Verifique el tipo de "estatal"Del objeto de la historia, si no es"indefinido". Entonces, llame al "historia.PushState ()Método para cambiar la URL:

función modifyUrl (title, url)
if (typeof (historia.Pushstate) != "Undefinado")
var obj =
Título: Título,
URL: URL
;
historia.Pushstate (obj, obj.Título, obj.Url);

Se puede ver que en cada clic del botón, la URL se cambiará con éxito sin recargar la página:

En la salida anterior, puede ver que el botón de flecha posterior en la parte superior izquierda (<-) está habilitado al hacer clic en el botón, indica que puede navegar de un lado a otro porque el "PushState ()El método "agrega la nueva URL en la pila de historial.

Método 2: Modifique la URL en JavaScript sin recargar la página utilizando el método "Replacestate ()"

Utilizar el "reemplazar ()Método para modificar la URL sin recargar la página web. También es una característica del "objeto de historia"Pero no agregará una nueva entrada a la pila de historial. Cambia el estado existente de la historia del navegador y lo reemplaza con un nuevo estado. Al usar este enfoque, no puede cambiar de un lado a otro entre las páginas.

Sintaxis
La sintaxis dada se utiliza para el método "Reemplazar ()":

ventana.historia.reemplazar (estado, título, URL);

Ejemplo
En la función definida, llame al "reemplazar ()Método para reemplazar la URL en el botón Haga clic sin recargar o navegar por la página:

función modifyUrl (title, url)
if (typeof (historia.reemplazar) != "Undefinado")
var obj =
Título: Título,
URL: URL
;
historia.reemplazar (obj, obj.Título, obj.Url);

La salida indica que en el clic de cada botón, la URL se ha cambiado y no hay opción para navegar para regresar a medida que el botón de flecha posterior está deshabilitada:

Hemos proporcionado toda la información esencial relevante para la modificación de la URL sin recargar la página en JavaScript.

Conclusión

Para modificar/cambiar la URL sin actualizar la página web, use el "PushState ()"Método o el"reemplazar ()" método. El método "PushState ()" agrega la nueva URL como una nueva entrada en una pila de historial y permite a los usuarios navegar de un lado a otro. Mientras que el método "Reemplazar ()" reemplaza la URL y no permite que se mueva a la página posterior. Este artículo describió los métodos para modificar la URL sin recargar la página web utilizando JavaScript.