La redirección de página es una forma de redirigir a los usuarios y navegadores web a otra dirección web que no fue solicitada por los usuarios. La página a la que se redirigió el usuario y el navegador web puede estar en el mismo servidor web o puede estar en un servidor web diferente. Podría ser un sitio web diferente también.
La función de redirección de página se introdujo por primera vez en 2015 cuando se introdujo la nueva versión es6 de JavaScript. Utiliza el objeto window.location que consiste en un conjunto de métodos que se pueden usar para redirigir una página. Todos los métodos se enumeran a continuación:
Método replace(): este método se utiliza para reemplazar la URL de la página actual con una nueva URL de la página a la que se debe redirigir al usuario.
Nota: El método de reemplazo elimina la URL actual del historial del navegador y no podemos navegar de regreso a esa URL usando la tecla Atrás del navegador.
Sintaxis:
window.location.replace("");
Acepta la URL de la página redirigida en forma de string pasada entre paréntesis.
Ejemplo:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Page redirection in es6</title>
</head>
<body>
<h2 id="GFG">Welcome To GFG</h2>
<h3>Redirection using <strong><i>.replace()</i></strong> method.</h3>
<button onclick="redirectME()">Redirect Me!</button>
<script>
function redirectME() {
window.location.replace("https://practice.geeksforgeeks.org/");
}
</script>
</body>
</html>
Producción:
Antes de redirigir la página:
Después de redirigir la página:
Método de asignación(): el método de asignación() se utiliza para asignar la nueva ubicación de la página redirigida al navegador.
NOTA: a diferencia del método de reemplazo, no elimina la URL actual del historial del navegador para que podamos volver a la página anterior si es necesario.
Sintaxis:
window.location.assign("");
También acepta un argumento de string para redirigir a una nueva página.
Ejemplo:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Page redirection in es6</title>
</head>
<body>
<h2 id="GFG">Welcome To GFG</h2>
<h3>Redirection using <strong><i>.assign()</i></strong> method.</h3>
<button onclick="redirectME()">Redirect Me!</button>
<script>
function redirectME() {
window.location.assign("https://practice.geeksforgeeks.org/");
}
</script>
</body>
</html>
Producción:
Antes de redirigir la página:
Después de redirigir la página:
método reload(): El método reload se utiliza para volver a cargar la página actual en un navegador web.
Sintaxis:
window.location.reload("");
Ejemplo:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Page redirection in es6</title>
</head>
<body>
<h2 id="GFG">Welcome To GFG</h2>
<h3>Reload tab Using <strong><i>.reload()</i></strong> method.</h3>
<button onclick="redirectME()">Reload Me!</button>
<script>
function redirectME() {
window.location.reload("https://practice.geeksforgeeks.org/");
}
</script>
</body>
</html>
Producción:
Antes de recargar la página:
Después de recargar la página:
método de navegación(): este método se usa para asignar un nuevo valor al objeto window.location , pero solo es útil en Internet Explorer, por lo que podría evitarse ya que otros navegadores no lo admiten.
Sintaxis:
window.navigate("");
- NOTA: Utilice rel=’canonical’ dentro de la etiqueta principal del documento HTML para informar al motor de búsqueda que está utilizando la redirección de página. Ayudará a mejorar el rango de la página web en la optimización de motores de búsqueda (SEO).
Publicación traducida automáticamente
Artículo escrito por abhisheksainiaggarwal y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA