Autor Tema: JavaScript window.history, screen y frames. Cargar web en iframe CU01172E  (Leído 3253 veces)

pedro,,

  • Moderador Global
  • Experto
  • *******
  • APR2.COM
  • Mensajes: 1292
    • Ver Perfil
Hola de nuevo.

Citar
EJERCICIO
Crea una página web que muestre en el lado izquierdo tres opciones donde podrá pulsar el usuario: clarin.com, elmercurio.cl y elespectador.com. En la parte inferior izquierda, debajo de estas opciones, habrá un frame donde deberá cargarse la página web según elija el usuario (por ejemplo si el usuario pulsa en elmercurio.cl en el frame que se encuentra debajo deberá mostrarse la web de elmercurio.cl). En el lado derecho estarán las opciones eluniversal.com.mx, elcomercio.pe y elmundo.es. En la parte inferior derecha, debajo de estas opciones, habrá un frame donde deberá cargarse la página web según elija el usuario.

Código: [Seleccionar]
<!DOCTYPE html>
<html>
<head>
<title>Ejemplo aprenderaprogramar.com</title><meta charset="utf-8">
<style>
#cabecera{text-align: center;}
.pulsador{ width: 20%;}
#pulsadorIzq{float: left;}
#pulsadorDcha{float: right;}
#contenedorFrames{width: 100%;}
li{padding:10px; width: auto; display: inline-block; margin: 10px; cursor: pointer; color: yellow; border-radius: 40px; background: purple;}
iframe{margin:20px; padding:20px; width: 40%; height: 600px;}
.limpiador{clear:both;}
</style>
<script type="text/javascript">
function ejemplo(destino){
iframe = document.getElementsByTagName('iframe');
switch (destino){
case 1:
iframe[0].src = 'http://clarin.com';
break;
case 2:
iframe[0].src = 'http://elmercurio.cl';
break;
case 3:
iframe[0].src = 'http://elespectador.com';
break;
case 4:
iframe[1].src = 'http://eluniversal.com.mx';
break;
case 5:
iframe[1].src = 'http://elcomercio.pe';
break;
case 6:
iframe[1].src = 'http://elmundo.es';
break;
}
}
</script>
</head>
<body>
<div id="cabecera"><h2>Cursos aprenderaprogramar.com</h2><h3>Ejemplos JavaScript</h3></div>
<div id ="pulsadorIzq" class="pulsador">
<ul>
<li onclick="ejemplo(1)">clarin.com</li>
<li onclick="ejemplo(2)">elmercurio.cl</li>
<li onclick="ejemplo(3)">elespectador.com</li>
</ul>
</div>
<div id ="pulsadorDcha" class="pulsador">
<ul>
<li onclick="ejemplo(4)">eluniversal.com.mx</li>
<li onclick="ejemplo(5)">elcomercio.pe</li>
<li onclick="ejemplo(6)">elmundo.es</li>
</ul>
</div>
<div class="limpiador" id = "contenedorFrames">
<iframe name="aprende1" src="http://clarin.com" >
<p>Tu navegador no admite iframes.</p>
</iframe>
<iframe name="aprende2" src="http://eluniversal.com.mx">
<p>Tu navegador no admite iframes.</p>
</iframe>
</div>
</body>
</html>

Saludos.
« Última modificación: 18 de Diciembre 2015, 09:17 por Mario R. Rancel »

Mario R. Rancel

  • Administrador
  • Experto
  • ********
  • APR2.COM
  • Mensajes: 1978
    • Ver Perfil
Re:JavaScript window.history, screen y frames. Cargar web en iframe CU01172E
« Respuesta #1 en: 18 de Diciembre 2015, 09:22 »
Buenos días Pedro, lo veo todo correcto. En lugar de mostrar inicialmente algo dentro del iframe con <iframe name="aprende1" src="http://clarin.com" > podría simplemente dejarse no establecida la propiedad src  con <iframe name="aprende1">, hasta que el usuario pulse en una opción, momento en que aparecería el contenido. Otra opción sería ponerle un color de fondo mientras no se haya elegido contenido, etc.

Saludos

pedro,,

  • Moderador Global
  • Experto
  • *******
  • APR2.COM
  • Mensajes: 1292
    • Ver Perfil
Re:JavaScript window.history, screen y frames. Cargar web en iframe CU01172E
« Respuesta #2 en: 18 de Diciembre 2015, 22:22 »
Dejé los iframe sin apuntar a ninguna dirección desde su carga y añadí este código para que quedase como comentas.

Código: [Seleccionar]
window.onload = function() {
iframe = document.getElementsByTagName( "iframe" );
for (var i = 0; i < iframe.length; i++) {iframe[i].style.background = 'yellow';}
}

Saludos y gracias.

Mario R. Rancel

  • Administrador
  • Experto
  • ********
  • APR2.COM
  • Mensajes: 1978
    • Ver Perfil
Re:JavaScript window.history, screen y frames. Cargar web en iframe CU01172E
« Respuesta #3 en: 21 de Diciembre 2015, 09:40 »
Perfecto,

Saludos

 

Sobre la educación, sólo puedo decir que es el tema más importante en el que nosotros, como pueblo, debemos involucrarnos.

Abraham Lincoln (1808-1865) Presidente estadounidense.

aprenderaprogramar.com: Desde 2006 comprometidos con la didáctica y divulgación de la programación

Preguntas y respuestas

¿Cómo establecer o cambiar la imagen asociada (avatar) de usuario?
  1. Inicia sesión con tu nombre de usuario y contraseña.
  2. Pulsa en perfil --> perfil del foro
  3. Elige la imagen personalizada que quieras usar. Puedes escogerla de una galería de imágenes o subirla desde tu ordenador.
  4. En la parte final de la página pulsa el botón "cambiar perfil".