En este artículo, sabremos cómo redirigir una página web a otra usando Javascript, además de comprender su implementación a través de los ejemplos.
Hay varios métodos para redirigir a otra página web usando JavaScript. Algunos de ellos se enumeran a continuación:
- location.href : se utiliza para establecer o devolver la URL completa de la página actual.
- location.replace() : Se utiliza para reemplazar el documento actual con el especificado.
- location.assign() : Se utiliza para cargar un nuevo documento.
Sintaxis:
location.href="URL"
or
location.replace("URL")
or
location.assign("URL")
Parámetros: Acepta una única URL de parámetro que es obligatoria. Se utiliza para especificar la referencia de la nueva página web.
Valor de retorno: Sin valor de retorno.
Ejemplo 1: este ejemplo ilustra el uso de la propiedad location.href .
HTML
<!DOCTYPE html>
<html>
<body>
<h2>Welcome to GeeksforGeeks</h2>
<p>This is the example of <i>location.href</i> way. </p>
<button onclick="myFunc()">Click me</button>
<!--script to redirect to another webpage-->
<script>
function myFunc() {
window.location.href = "https://www.geeksforgeeks.org/";
}
</script>
</body>
</html>
Producción:
propiedad location.href
Ejemplo 2: Este es un ejemplo de un método location.replace() .
HTML
<!DOCTYPE html>
<html>
<body>
<h2>Welcome to GeeksforGeeks</h2>
<p>This is the example of <i>location.replace</i> method. </p>
<button onclick="myFunc()">Click me</button>
<!--script to redirect to another webpage-->
<script>
function myFunc() {
location.replace("https://www.geeksforgeeks.org/");
}
</script>
</body>
</html>
Producción:
ubicación.reemplazar
Ejemplo 3: este ejemplo utiliza el método location.assign() .
HTML
<!DOCTYPE html>
<html>
<head>
<title>Location assign() Method</title>
</head>
<body>
<h1>GeeksforGeeks</h1>
<h2>Location assign() Method</h2>
<button onclick="load()">Click Here!</button>
<!-- Script to use Location assign() Method -->
<script>
function load() {
location.assign("https://ide.geeksforgeeks.org/index.php");
}
</script>
</body>
</html>
Producción:
ubicación.asignar
NOTA: El resultado de todos los métodos será el mismo, pero el método location.replace() elimina la URL del documento actual del historial del documento. Por lo tanto, es bueno usar el método location.assign() si desea tener la opción de volver al documento original.
Publicación traducida automáticamente
Artículo escrito por ProgrammerAnvesh y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA