Cómo redirigir a otra página web usando JavaScript

JavaScript ofrece muchas formas de redirigir al usuario a una página web diferente. Aprenda la forma canónica y también descubra todas las opciones que tiene, usando JavaScript simple

JavaScript ofrece muchas formas de redirigir al usuario a una página web diferente, si durante la ejecución de su programa necesita moverse a una página diferente.

El que puede considerarse canónico para navegar a una nueva URL es

window.location = 'https://newurl.com'

Si desea redirigir a una ruta diferente, en el mismo dominio, use:

window.location.pathname = '/new'

Esto está usando ellocationobjeto ofrecido por elAPI de historial.

Otras opciones para redireccionar

Como ocurre con la mayoría de las cosas en programación, hay muchas formas de realizar la misma operación.

Ya quewindowestá implícito en el navegador, también puede hacer:

location = 'https://newurl.com'

Otra forma es configurar elhrefpropiedad delocation:

window.location.href = 'https://newurl.com'

locationtambién tiene unassign()método que acepta una URL y realiza lo mismo:

window.location.assign('https://newurl.com')

losreplace()El método es diferente a las formas anteriores porque reescribe la página actual en el historial. La página actual se borra, por lo que cuando hace clic en el botón "Atrás", vuelve a la página queahoraes el último visitado.

window.location.replace('https://newurl.com')

Esto puede resultar conveniente en algunas situaciones.

Diferentes formas de llegar alwindowobjeto

El navegador expone elselfytopobjetos, que todos hacen referencia alwindowobjeto, por lo que puede utilizarlos en lugar dewindowen todos los ejemplos anteriores:

self.location = 'https://newurl.com'

top.location = https://newurl.com

Redireccionamiento 301 mediante una directiva del lado del servidor

Todos los ejemplos anteriores consideran el caso de una decisión programática de pasar a una página diferente.

Si necesita redirigir porque la URL actual es antigua y mover la URL a una nueva, es mejor usar la directiva de nivel de servidor y configurar el código HTTP 301 para indicar a los motores de búsqueda que la URL actual se ha movido permanentemente al nuevo recurso.

Esto se puede hacer a través de.htaccesssi usa Apache.Netlifyhace esto a través de un_redirectsexpediente.

¿Son posibles las redirecciones 301 usando JavaScript?

Lamentablemente no.

Eso no es posible en el lado del cliente.

El código de respuesta HTTP 301 debe enviarse desde el servidor, mucho antes de que el navegador ejecute JavaScript.

Los experimentos dicen que los motores de búsqueda interpretan los redireccionamientos de JavaScript como redireccionamientos 301. Veresta publicación de Search Engine Landpara referencia.

Google dice:

El uso de JavaScript para redirigir a los usuarios puede ser una práctica legítima. Por ejemplo, si redirige a los usuarios a una página interna una vez que han iniciado sesión, puede usar JavaScript para hacerlo. Al examinar JavaScript u otros métodos de redireccionamiento para asegurarse de que su sitio cumpla con nuestras pautas, considere la intención. Tenga en cuenta que las redirecciones 301 son mejores cuando mueve su sitio, pero puede usar una redirección de JavaScript para este propósito si no tiene acceso al servidor de su sitio web.

Utilice una metaetiqueta HTML

Otra opción es usar una metaetiqueta en su HTML:

<html>
  <head>
    <meta http-equiv="refresh" content="0;URL=https://newurl.com/">
  </head>
</html>

Esto hará que el navegador cargue la nueva página una vez que haya cargado e interpretado la actual, y no señalará nada a los motores de búsqueda. La mejor opción es siempre utilizar un redireccionamiento 301 a nivel de servidor.


Más tutoriales de js: