Advertisement
  1. Code
  2. JavaScript

Cómo cambiar la URL en JavaScript: redirecciones

by
Read Time:4 minsLanguages:

Spanish (Español) translation by Ana Paulina Figueroa Vazquez (you can also view the original English article)

En este artículo rápido, discutiremos cómo cambiar la URL en JavaScript mediante la redirección. Analizaremos un par de métodos diferentes que puedes usar para llevar a cabo redirecciones de JavaScript.

JavaScript es una de las tecnologías centrales de la web. La mayoría de los sitios web la usan, y todos los navegadores web modernos son compatibles con ella sin necesidad de complementos. En esta serie, discutiremos diferentes trucos y consejos que te ayudarán en tu desarrollo cotidiano con JavaScript.

Al trabajar con JavaScript, a menudo necesitas redirigir a los usuarios a una página diferente. JavaScript proporciona diferentes métodos que puedes utilizar para lograrlo.

Hoy discutiremos cómo realizar redirecciones de URL en JavaScript puro y con la biblioteca jQuery.

Cómo cambiar la URL en JavaScript puro

En esta sección, revisaremos los diferentes métodos integrados que proporciona JavaScript para implementar la redirección de URL. De hecho, JavaScript proporciona el objeto location, una parte del objeto window, que te permite realizar diferentes operaciones relacionadas con las URL.

El método location.href

El método location.href es una de las maneras más populares de llevar a cabo redirecciones de JavaScript. Si intentas obtener el valor de location.href, este devuelve el valor de la URL local. De manera similar, también puedes usarlo para establecer una nueva URL y los usuarios serán redirigidos a ella.

Analicemos el siguiente ejemplo.

Como puedes ver, es bastante sencillo redirigir usuarios con el método location.href. Ya que el objeto location es parte del objeto window, el fragmento de código anterior también puede escribirse de esta manera:

Entonces, de esta forma puedes usar el método location.href para cambiar la URL y redirigir a los usuarios a una página web diferente.

El método location.assign

El método location.assign trabaja de manera muy similar al método location.href, y te permite redirigir a los usuarios a una página web diferente.

Veamos rápidamente cómo funciona con el siguiente ejemplo.

Como puedes ver, es bastante sencillo. Solamente necesitas enviar la URL en el primer argumento del método assign, y este redireccionará a los usuarios a esa URL. Es importante tomar en cuenta que el método assign mantiene el estado del objeto History. En la siguiente sección discutiremos esto a detalle.

El método location.replace

También puedes usar el método location.replace para llevar a cabo redirecciones de JavaScript. El método location.replace te permite reemplazar la URL actual con una URL diferente para llevar a cabo la redirección.

Veamos como funciona con el siguiente ejemplo.

Si bien el método location.replace se parece mucho a los métodos location.href y location.assign para redirigir usuarios a una URL diferente, existe una diferencia importante entre ellos. Al usar el método location.replace, la página actual no se guardará en la sesión y, de hecho, será eliminada del objeto History de JavaScript. Por lo tanto, los usuarios no podrán usar el botón "Atrás" para navegar a ella.

Intentemos comprender esto con el siguiente ejemplo.

En el ejemplo anterior, suponemos que un usuario está navegando en la página web https://code.tutsplus.com. A continuación, usamos el método location.href para redirigir al usuario a la página web https://design.tutsplus.com. Finalmente, usamos el método location.replace para redirigir al usuario a la página web https://business.tutsplus.com. Ahora, si el usuario hace clic en el botón "Atrás", regresaría a https://code.tutsplus.com en lugar de a https://design.tutsplus.com, ya que hemos usado el método location.replace y, de hecho, ha reemplazado la URL actual con https://business.tutsplus.com en el objeto History.

Por lo tanto, debes comprender la diferencia entre location.replace y otros métodos antes de usarlos. No puedes usarlos indistintamente, ya que el método location.replace altera el estado del objeto History de JavaScript. Y, por lo tanto, si quieres conservar el estado del objeto History, deberías preferir los otros métodos para redirigir a los usuarios.

Cómo llevar a cabo redirecciones de URL con jQuery

Aunque JavaScript puro ofrece suficientes opciones cuando se trata de la redirección de URL, si aún estás buscando cómo hacer esto con la biblioteca jQuery, lo veremos rápidamente en esta sección.

En jQuery, puedes usar el método attr para llevar a cabo la redirección, como se muestra en el siguiente fragmento de código.

Como puedes ver, ¡es bastante sencillo redirigir a los usuarios con jQuery!

Así que esas son las diferentes maneras que puedes usar para llevar a cabo redirecciones de JavaScript. Y, con eso, también hemos llegado al final de este artículo rápido.

Conclusión

Hoy discutimos de qué manera puedes implementar las redirecciones de JavaScript. Analizamos diferentes métodos que puedes usar para realizar redirecciones de JavaScript junto con ejemplos.

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.