Diferencia entre window.location.href y window.location.assign en JavaScript | Explicado

En JavaScript, cuando necesitamos redirigir a una nueva página web, podemos usar window.location.href o window.location.assign. Ambos métodos parecen hacer lo mismo, pero existen diferencias sutiles. En este artículo, explicaremos las diferencias y cuándo debemos usar uno u otro.

📋 Aquí podrás encontrar✍

¿Qué es window.location.href?
¿Qué es window.location.assign?
Resumen de las diferencias
Ejemplos de códigos
Preguntas frecuentes
Conclusión

¿Qué es window.location.href?

La propiedad href de window.location nos permite obtener o establecer la URL actual de la página web. Al establecer un nuevo valor para esta propiedad, se carga la nueva página web. Entonces, al utilizar window.location.href = "https://nuevapagina.com", estamos cambiando la ubicación de la página actual a una página completamente nueva.

Esta propiedad también es utilizada para recuperar la URL actual del archivo HTML que estamos viendo. Por ejemplo, si queremos obtener la URL de la página actual, podemos hacer lo siguiente:

var url = window.location.href;

¿Qué es window.location.assign?

El método window.location.assign es similar al uso de la propiedad href, ya que también nos permite cambiar la URL actual por una URL nueva. La diferencia aquí es que assign() nos permite cambiar la ubicación de la página actual por una nueva URL, pero también nos permite volver a la página anterior usando el botón de navegación "Volver" del navegador.

Un ejemplo de cómo utilizar window.location.assign es:

window.location.assign("https://nuevapagina.com");

Este método también tiene otra ventaja: si cambiamos de URL utilizando el método assign(), podemos acceder al objeto window.location desde cualquier marco o iframe que esté cargado en la página actual.

Resumen de las diferencias

La propiedad href nos permite cargar una nueva página
El método assign nos permite cargar una nueva página pero también permite volver al historial del navegador
Utilizando el método assign, podemos acceder al objeto window.location en cualquier marco/iframe cargado en la página actual

Ejemplos de códigos

Un ejemplo de cómo utilizar la propiedad href en un botón:

```

```

Un ejemplo de cómo utilizar el método assign en JavaScript:

```
function nuevaPagina() {
window.location.assign("https://nuevapagina.com");
}
```

Preguntas frecuentes

¿Puedo utilizar ambas opciones indistintamente?

Sí, ambas opciones permiten cambiar la ubicación de la página actual a una nueva página, sin embargo, si necesitas volver al historial del navegador, debes usar el método assign. Si sólo necesitas cargar una nueva página, la propiedad href es suficiente.

¿Puedo utilizar window.location.reload() después de utilizar window.location.assign()?

Sí, una vez que hayas utilizado el método assign, puedes recargar la página utilizando el método reload de window.location:

window.location.assign("https://nuevapagina.com");
window.location.reload();

¿Qué sucede si utilizo window.location.assign() dentro de un iframe?

Si utilizas window.location.assign() dentro de un iframe, sólo cambiarás la ubicación del iframe, no de la página principal. Para cambiar la ubicación de la página principal, utiliza assign dentro de la ventana principal:

window.top.location.assign("https://nuevapagina.com");

¿Cuál es la mejor opción a utilizar?

Depende de tus necesidades, si no necesitas volver al historial del navegador, la propiedad href es suficiente. Pero si necesitas usar el historial, debes utilizar el método assign.

Conclusión

Ahora que sabes la diferencia entre window.location.href y window.location.assign, puedes decidir qué método es el mejor para tus necesidades. Recuerda que si necesitas volver al historial del navegador, debes utilizar assign. Esperamos que este artículo haya sido útil para ti.