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

Your email address will not be published.

PHP Altruistas Ocio en Las Palmas
Anterior post

Comprobar si una entrada de texto es un número en javaScript

PHP Altruisas Ocio Eventos Cursos Las Palmas
Siguiente post

Las expresiones regulares en PHP

Latest from javaScript