PHP Altruistas Ocio en Las Palmas
/

El javaScript y la navegación entre páginas

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>

Ejecutar ejemplo

  • Métodos: split ( ), write ( ), Back ( )
  • Eventos: onclick ( )
  • Objetos: window, location, history, document
  • Argumentos: search, referrer
  • funciones javaScript: unescape(parametro)

Deja una respuesta