Método 1: Reemplazar el estado actual con replaceState() Método: La interfaz de historial del navegador administra el historial de sesiones del navegador. Incluye la página visitada en la pestaña o marco donde se encuentra la página actual. La manipulación de este estado se puede utilizar para cambiar la URL del navegador sin recargar la página.
El método replaceState() se usa para modificar la entrada del historial actual y reemplazar las propiedades del estado con las de los parámetros pasados.
Los parámetros de este método tienen 3 partes, el objeto de estado que es un objeto serializable sobre el estado, el título que es el título del nuevo estado y la URL que es la nueva URL del estado.
La URL se puede cambiar pasando la URL requerida como una string a este método. Esto cambiará la URL de la página sin recargar la página.
Ejemplo:
<!DOCTYPE html>
<html>
<head>
<title>
How to modify URL without reloading
the page using JavaScript?
</title>
</head>
<body>
<h1 style="color: green">
GeeksForGeeks
</h1>
<b>
How to modify URL without reloading
the page using JavaScript?
</b>
<p>
Click on the button below to modify
the current history state
</p>
<button onclick="modifyState()">
Modify history state
</button>
<script>
function modifyState() {
let stateObj = { id: "100" };
window.history.replaceState(stateObj,
"Page 3", "/page3.html");
}
</script>
</body>
</html>
Producción:
- Antes de hacer clic en el botón:
- Después de hacer clic en el botón:
Método 2: agregar un nuevo estado con método pushState(): el método pushState() se usa para agregar una nueva entrada de historial con las propiedades pasadas como parámetros. Esto cambiará la URL actual al nuevo estado proporcionado sin recargar la página.
Los parámetros de este método tienen tres partes, el objeto de estado que es un objeto serializable sobre el estado, el título que es el nuevo título del estado y la URL que es la nueva URL del estado.
La URL se puede cambiar pasando la URL requerida como una string a este método. Esto cambiará la URL de la página sin recargar la página.
Ejemplo:
<!DOCTYPE html>
<html>
<head>
<title>
How to modify URL without reloading
the page using JavaScript?
</title>
</head>
<body>
<h1 style="color: green">
GeeksForGeeks
</h1>
<b>
How to modify URL without reloading
the page using JavaScript?
</b>
<p>
Click on the button below to add
a new history state
</p>
<button onclick="addState()">
Add history state
</button>
<script>
function addState() {
let stateObj = { id: "100" };
window.history.pushState(stateObj,
"Page 2", "/page2.html");
}
</script>
</body>
</html>
Producción:
- Antes de hacer clic en el botón:
- Después de hacer clic en el botón:
Publicación traducida automáticamente
Artículo escrito por sayantanm19 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA