Este artículo describirá los métodos para modificar la URL sin recargar la página web usando JavaScript.
¿Cómo modificar/cambiar la URL en JavaScript sin recargar la página?
Para modificar la URL sin recargar la página web, utilice el siguiente método predefinido de JavaScript:
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, utilice el botón “ empujarEstado() ' método. Es una característica o el método predefinido del “ objeto de la historia ” que permite cambiar el historial del navegador sin navegar ni refrescar la página. Simplemente agrega o modifica la pila de historial y no carga una página nueva. Al usar este enfoque, puede alternar 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 . empujarestado ( 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 ' modificar URL () ” función en el clic del botón:
< botón al hacer clic = 'modifyUrl('CSS Tutorial', 'CSSTutorial.html');' > 2 botón >
< botón al hacer clic = 'modifyUrl('Tutorial de JavaScript', 'Tutorial de JavaScript.html');' > 3 botón >
< botón al hacer clic = 'modifyUrl('Tutorial de Java', 'Tutorial de Java.html');' > 4 botón >
Definir una función “ modificar URL () ” en un archivo JavaScript que se activará al hacer clic en el botón. Toma dos parámetros, el “ título ' y el ' URL ”. Cuando se llama al método al hacer clic en el botón, el 'título' y la 'url' se pasarán como argumentos. Compruebe el tipo de “ empujarestado ” del objeto histórico, si no es “ indefinido ”. Luego, llame al “ historia.pushState() ” método para cambiar la URL:
función modificar URL ( título , URL ) {
si ( tipo de ( historia. empujarestado ) != 'indefinido' ) {
era objeto = {
Título : título ,
URL : URL
} ;
historia. empujarestado ( objeto , objeto Título , objeto URL ) ;
}
}
Se puede ver que en cada clic de botón, la URL se cambiará con éxito sin recargar la página:
En el resultado anterior, puede ver que el botón de flecha hacia atrás en la parte superior izquierda ( <- ) está habilitado al hacer clic en el botón, indica que puede navegar hacia adelante y hacia atrás porque el “ empujarEstado() 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 ' reemplazarEstado() ” método para modificar la URL sin recargar la página web. También es una característica de la “ objeto de la historia ” pero no agregará una nueva entrada a la pila de historial. Cambia el estado existente del historial del navegador y lo reemplaza con un nuevo estado. Al usar este enfoque, no puede alternar entre las páginas.
Sintaxis
La sintaxis dada se utiliza para el método “replaceState()”:
Ejemplo
En la función definida, llame al ' reemplazarEstado() ” método para reemplazar la URL en el clic del botón sin recargar o navegar por la página:
si ( tipo de ( historia. reemplazarEstado ) != 'indefinido' ) {
era objeto = {
Título : título ,
URL : URL
} ;
historia. reemplazarEstado ( objeto , objeto Título , objeto URL ) ;
}
}
El resultado indica que en cada clic de botón, la URL ha cambiado y no hay ninguna opción para navegar para volver, ya que el botón de flecha hacia atrás está deshabilitado:
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, utilice el botón “ empujarEstado() ” método o el “ reemplazarEstado() ' 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 “replaceState()” reemplaza la URL y no permite pasar a la última página. Este artículo describe los métodos para modificar la URL sin recargar la página web usando JavaScript.