Redirigir a una URL en JavaScript

En este artículo, vamos a ver cómo para redirigir a otra página o sitio web utilizando JavaScript?

Sabemos que el objeto de la ventana es como la madre de todos los objetos en JavaScript y contiene un montón de diferentes métodos y propiedades que se le atribuye. También hemos visto algunos de ellos como localStorage , innerWidth , innerHeight , outerWidth y outerHeight , etc. Hoy vamos a ver una propiedad llamada lugar construido en la parte superior de la ventana de objeto que le permitirá nos volver a dirigir a diferentes páginas de un punto.

Sintaxis:

    window.location = <url>;

La URL debe estar encerrado entre comillas. Vamos a tratar de forma rápida dentro de la consola dev de su navegador. Vaya a cualquier página y abrir la consola y escribir,

window.location = "https://www.facebook.com";

Hit entrar y voila! Irá directamente a facebook.com.

También podemos redirigir a una página en la carga de la ventana. Veamos el siguiente ejemplo,

index.html

<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
    <!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
    <!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<script type="text/javascript">
function loadNewDoc() {
window.location = "https://www.includehelp.com/";
}
</script>
</head>
<style>
.loader {
margin: auto;
border: 16px solid brown;
width: 120px;
height: 120px;
border-top-color: violet;
border-bottom-color: violet;
border-radius: 50%;
animation: loaderAnimate 4s linear infinite;
}
@keyframes loaderAnimate {
0% {
transform: rotate(0deg) scale(1);
}
25% {
border: 16px solid SlateBlue;
border-top-color: Tomato;
border-bottom-color: Tomato;
}
50% {
transform: rotate(360deg) scale(1.1);
border: 16px solid orange;
border-top-color: yellow;
border-bottom-color: yellow;
}
75% {
border: 16px solid DodgerBlue;
border-top-color: MediumSeaGreen;
border-bottom-color: MediumSeaGreen;
}
100% {
transform: rotate(720deg) scale(1);
}
}
@keyframes appear {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
</style>
<body>
<body onLoad="setTimeout('loadNewDoc()', 5000)">
<h3>You will be redirected shorty...</h3>
<div class="loader"></div>
</body>
<script>
</script>
</html>

salida

Redirect to a URL in JavaScript - 4

Y entonces tenemos la página principal class includehelp.com

Tenemos otros métodos de redirección a redirigir una URL a otra página como location.replace () , localtion.assign () y location.reload () .

location.replace () reemplaza el documento actual por uno nuevo. Pasamos a la nueva URL como parámetro a la misma y se realiza una redirección HTTP. Del mismo modo, también podemos utilizar location.assign () .


Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *