En este artículo, veremos cómo se puede obligar a una página a cargar otra página en JavaScript.
Enfoque: Podemos usar la propiedad window.location dentro de la etiqueta del script para cargar a la fuerza otra página en Javascript. Es una referencia a un objeto Ubicación que representa la ubicación actual del documento. Podemos cambiar la URL de una ventana accediendo a ella.
Sintaxis:
<script>
window.location = <Path / URL>
</script>
Ejemplo:
<script>
window.location = "https://www.geeksforgeeks.org/"
</script>
Entonces, en el ejemplo anterior, vemos que al cambiar el objeto window.location dentro de Javascript, podemos cambiar la URL de nuestra ventana y, por lo tanto, cargar con éxito cualquier página a la fuerza desde nuestro Javascript sin ninguna etiqueta href. Construiremos una pequeña muestra de trabajo para aprenderlo de manera práctica.
A continuación se muestra la implementación paso a paso:
Paso 1: Cree un archivo llamado index.html . Agregue un encabezado y dos botones. Un botón carga a la fuerza una página con una URL activa y el otro botón carga una página HTML local. En la etiqueta <script> tenemos dos funciones, una carga la página de inicio de gfg y la segunda carga una página HTML local usando la propiedad window.location .
index.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">
</head>
<body>
<h3>This is the original page</h3>
<br>
<button onclick="force_load_gfg()">
Force Load GFG Page
</button>
<br><br>
<button onclick="force_load_local()">
Force Load Local HTML page
</button>
<script>
function force_load_gfg() {
window.location =
"https://www.geeksforgeeks.org/"
}
function force_load_local() {
window.location =
"F:/gfg/PageRedirect/newPage.html"
}
</script>
</body>
</html>
Paso 2: Crea un archivo llamado newPage.html . Esta es la página HTML local que Javascript cargaría.
newPage.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> New Page </title> </head> <body> <h3>This is the new loaded page</h3> </body> </html>
Producción:
Presentación de pantalla de salida
Publicación traducida automáticamente
Artículo escrito por devrajkumar1903 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA