Deseamos programar tres páginas para realizar luego una navegación entre ellas. En la primera página vamos a tener dos enlaces que nos conducirá a respectivas páginas distintas. La intención de este ejemplo es poder enviar información desde una página origen a otra de destino, todas ellas dentro de un mismo proyecto.
La programación es exclusiva en javaScript clásico en combinación con HTML5.
Página principal
<!DOCTYPE html> <html lang="es"> <head> <metacharset="UTF-8"> <metaname="viewport"content="width=device-width, initial-scale=1.0"> <title>Navegación entre páginas</title> </head> <body> <h1>Navegación entre páginas - Altruistas Org</h1> <script> document.write("<p>Enlace al documento <a href='ejemplo-id_1467-1.htm'>Pagina 1</a></p>"); document.write("<p>Enlace a la página <a href='ejemplo-id_1467-2.htm?dominio=Altruistas Org?lenguaje=javaScript'>Pagina 2 (paso de dos argumentos)</a></p><br>"); </script> </body> </html>
Primera página auxiliar
<!DOCTYPE html> <html lang="es"> <head> <metacharset="UTF-8"> <metaname="viewport"content="width=device-width, initial-scale=1.0"> <title>Página 1</title> </head> <body> <h1>Navegación entre páginas - Página 1</h1> <script> document.write("<p>Esta página ha sido llamada desde la URL: <b>" + document.referrer + "</b></p>"); document.write("<p><a href='" + document.referrer + "'>Volver a la página anterior</a></p>"); </script> </body> </html>
Segunda página auxiliar
<!DOCTYPE html> <html lang="es"> <head> <meta charset="UTF-8"> <meta name="viewport"content="width=device-width, initial-scale=1.0"> <title>Pagina 2</title> <script> function historyBack() { window.history.back(); } </script> </head> <body> <h1>Navegación entre páginas - Página 2</h1> <script> document.write("<p>Esta página ha sido llamada desde la URL: <b>" + document.referrer + "</b></p>"); var parametro = window.location.search; document.write("Argumentos (antes de la decodificación): " + parametro + "<br>"); parametro = unescape(parametro); document.write("Argumentos (después de la decodificación): " + parametro + "<br><br>"); //dividimos en partes con ? como marca var particion = parametro.split("?"); //dividimos cada parte por = como marca var dominio = particion[1].split("="); var lenguaje = particion[2].split("="); //la segunda parte es la información útil document.write ("El valor del argumento dominio es : <b>" + dominio[1] + "</b><br>"); document.write ("El valor del argumento lenguaje es : <b>" + lenguaje[1]) + "</b><br><br>"; </script> <input type="button"id="botonHistoryBack"value="Volver a la página anterior" onclick="historyBack()"> </body> </html>
- Métodos: split ( ), write ( ), Back ( )
- Eventos: onclick ( )
- Objetos: window, location, history, document
- Argumentos: search, referrer
- funciones javaScript: unescape(parametro)