Redirigir a una página web en JavaScript

  2. HowTo
  3. JavaScript Howtos
  4. Redirigir a una página web en JavaScript
Nithin Krishnan 12 octubre 2023
JavaScript JavaScript Redirect
  1. JavaScript redirecciona una página web con location.href()
  2. JavaScript redirecciona una página web con location.replace()
  3. 3. JavaScript redirecciona una página web con location.assign()
  4. 4. JavaScript redirecciona una página web creando un elemento de anclaje dinámicamente
  5. Conclusión
Redirigir a una página web en JavaScript

Hay varias formas en JavaScript para redirigir al usuario. Depende de los requisitos comerciales sobre qué tipo de comportamiento de redireccionamiento debe tener el sitio. Puede redirigir a sus usuarios de las siguientes formas:

  1. location.href()
  2. location.replace()
  3. location.assign()
  4. Crea un elemento de ancla de forma dinámica

JavaScript redirecciona una página web con location.href()

Utilice la interfaz location junto con los objetos Document y Window para redireccionar. Normalmente, window.location.href devuelve la URL de la página actual. Por ejemplo, si ejecuta el siguiente código, verá la URL de la página:

console.log(window.location.href)

Producción :

"https://www.delftstack.com/"

El truco consiste en reemplazar esta URL asignando una URL diferente a window.location.href. Hará que el navegador cargue la página especificada por la URL y, por lo tanto, la redireccionará. En términos de la pila del historial del sitio, este método cambia la URL de referencia actual. El siguiente código navegará a la página de instrucciones de DelfStack.

window.location.href = 'https://www.delftstack.com/howto/';

Observaciones:

  1. Una vez que se carga la nueva URL, se puede acceder a la página web anterior mediante el botón Atrás del navegador.
  2. Es el método de redireccionamiento más utilizado.

JavaScript redirecciona una página web con location.replace()

Si desea mudarse permanentemente a una página web, utilice el location.replace. La diferencia es que location.replace reemplazará la URL actual con una nueva URL. Por lo tanto, el usuario no podrá volver a la URL anterior. En términos de la pila del historial del navegador, el método muestra la última URL de la página web y la inserta en el valor.

window.location.replace('https://www.delftstack.com');

Al ejecutar esto, se cargará el sitio https://www.delftstack.com.

Observaciones:

  1. Recomendamos utilizar este método solo cuando sea necesario.
  2. No se puede volver al enlace anterior utilizando este método. Por lo tanto, puede que no sea una buena experiencia de usuario.

3. JavaScript redirecciona una página web con location.assign()

Al igual que location.replace(), el método assign() tiene la diferencia de que el enlace actual permanece en el historial del navegador. Por lo tanto, el usuario podrá volver a la página anterior utilizando el botón de retroceso del navegador. Este método también toma la URL de destino como parámetro.

window.location.assign('https://www.delftstack.com');

4. JavaScript redirecciona una página web creando un elemento de anclaje dinámicamente

En los navegadores más antiguos, especialmente Internet Explorer, que tienen la versión 8 o inferior, la interfaz de ubicación no es compatible. Por lo tanto, creamos una etiqueta de anclaje (<a>) dinámicamente y establecemos el atributo href con la URL de destino. Como se mencionó anteriormente, la etiqueta de anclaje es un elemento pasivo que requiere la interacción del usuario para invocarlo. Por lo tanto, se activa un evento de clic en el código para que funcione la redirección.

let targetURL = 'https://www.delftstack.com';
let newURL = document.createElement('a');
newURL.href = targetURL;
document.body.appendChild(newURL);
newURL.click();

Aquí, logramos la redirección mediante:

  1. Creación de un elemento de etiqueta de anclaje document.createElement('a');
  2. Configuración de la propiedad href con la nueva URL newURL.href = targetURL
  3. Adjuntar la etiqueta creada dinámicamente al nodo DOM con document.body.appendChild(newURL)
  4. Finalmente, invocándolo emulando a un usuario, haga clic en newURL.click()

El navegador cargará la nueva URL.

Conclusión

Dependiendo de los requisitos comerciales, será bueno utilizar el método de actualización de meta para redirigir a un usuario tan pronto como llegue a la página web del sitio en mantenimiento. El uso de etiquetas de anclaje es bastante común si la navegación se basa en el clic del usuario. Podemos usar métodos de la interfaz de ubicación en JavaScript, window.location.href y window.location.assign(), para enviar un usuario a una nueva URL mediante programación.

Artículo relacionado - JavaScript Redirect