Window.location es una propiedad que devuelve un objeto Location con información sobre la ubicación actual del documento. Este objeto Ubicación representa la ubicación (URL) del objeto al que está vinculado, es decir, contiene toda la información sobre la ubicación actual del documento (host, href, puerto, protocolo, etc.)
Los tres comandos se utilizan para redirigir la página a otra página/sitio web, pero difieren en cuanto a su impacto en el historial del navegador.
ventana.ubicación.href Propiedad:
- La propiedad href en el objeto de ubicación almacena la URL de la página web actual.
- Al cambiar la propiedad href , un usuario puede navegar a una nueva URL, es decir, ir a una nueva página web.
- Agrega un elemento a la lista del historial (para que cuando el usuario haga clic en el botón «Atrás», pueda regresar a la página actual).
- Se considera que actualizar la propiedad href es más rápido que usar la función asignar() (ya que llamar a una función es más lento que acceder a la propiedad).
Sintaxis:
window.location.href = 'https://www.geeksforgeeks.org';
Ejemplo:
HTML
<!DOCTYPE html>
<html>
<body>
<button onclick="getCurrentLocation()">
Get URL
</button>
<button onclick="setCurrentLocation()">
Change URL
</button>
<script>
function getCurrentLocation() {
// Get current location
var loc = window.location.href;
alert(loc);
}
function setCurrentLocation() {
// Change current location
var newloc = "https://www.geeksforgeeks.org/";
window.location.href = newloc;
}
</script>
</body>
</html>
Producción:
Nota: Las siguientes 2 líneas de código tienen el mismo propósito.
Javascript
// Less favoured window.location = 'https://www.geeksforgeeks.org' // More favoured window.location.href = 'https://www.geeksforgeeks.org'
ventana.ubicación.reemplazar Propiedad:
- La función de reemplazo se usa para navegar a una nueva URL sin agregar un nuevo registro al historial.
- Como sugiere el nombre, esta función «reemplaza» la entrada superior de la pila del historial, es decir, elimina la entrada superior de la lista del historial, sobrescribiéndola con una nueva entrada.
- Por lo tanto, cuando el usuario haga clic en el botón «Atrás», no podrá volver a la página actual.
- Por lo tanto, la principal diferencia entre los métodos de asignación() y replace() es que la función replace() eliminará la página actual del historial de la sesión.
- La función de reemplazo no borra todo el historial de la página, ni hace que el botón «Atrás» no funcione.
Sintaxis:
window.location.replace("https://geeksforgeeks.org/web-development/")
Ejemplo:
HTML
<!DOCTYPE html>
<html>
<body>
<button onclick="replaceLocation()">
Replace current webpage
</button>
<script>
function replaceLocation() {
// Replace the current location
// with new location
var newloc = "https://www.geeksforgeeks.org/";
window.location.replace(newloc);
}
</script>
</body>
</html>
Producción:
ventana.ubicación.asignar Propiedad:
- La función de asignación es similar a la propiedad href, ya que también se usa para navegar a una nueva URL.
- Sin embargo, el método de asignación no muestra la ubicación actual, solo se usa para ir a una nueva ubicación.
- A diferencia del método de reemplazo, el método de asignación agrega un nuevo registro al historial (para que cuando el usuario haga clic en el botón «Atrás», pueda regresar a la página actual).
- Sin embargo, en lugar de actualizar la propiedad href, llamar a una función se considera más seguro y legible.
- El método de asignación() también se prefiere sobre href, ya que permite al usuario simular la función y verificar los parámetros de entrada de URL durante la prueba.
Sintaxis:
window.location.assign("https://geeksforgeeks.org/")
Ejemplo:
HTML
<!DOCTYPE html>
<html>
<body>
<button onclick="assignLocation()">
Go to new webpage
</button>
<script>
function assignLocation() {
// Go to another webpage (geeksforgeeks)
var newloc = "https://www.geeksforgeeks.org/";
window.location.assign(newloc);
}
</script>
</body>
</html>
Producción:
Diferencia entre las propiedades window.location.replace, window.location.assign y window.location.href:
| ventana.ubicación.href | ventana.ubicación.reemplazar | ventana.ubicación.asignar |
|---|---|---|
| Solía devolver la URL de la página actual. | Se utiliza para reemplazar el documento actual. | Se utiliza para cargar un nuevo documento. |
| Almacena la URL de la página web actual. | No muestra la ubicación actual. | No muestra la ubicación actual. |
| Agrega un nuevo registro a la lista de historial. | No muestra un nuevo registro en la lista de historial. | Agrega un nuevo registro a la lista de historial. |
| No elimina la página actual del historial de la sesión. | Elimina la página actual del historial de la sesión. | No elimina la página actual del historial de la sesión. |
| Es más rápido que usar la asignación(). | Se utiliza cuando la página web actual debe eliminarse de la lista del historial. | Es más seguro y más legible que usar href. |
Publicación traducida automáticamente
Artículo escrito por verma_anushka y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA