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

pedro,, · « **en:** 15 de Diciembre 2015, 22:28 »

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.

Mario R. Rancel · « **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,, · « **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 · « **Respuesta #3 en:** 21 de Diciembre 2015, 09:40 »

Perfecto,

Saludos

Foros aprenderaprogramar.com
Didáctica y divulgación de la programación

Noticias:

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

pedro,,

JavaScript window.history, screen y frames. Cargar web en iframe CU01172E

Mario R. Rancel

Re:JavaScript window.history, screen y frames. Cargar web en iframe CU01172E

pedro,,

Re:JavaScript window.history, screen y frames. Cargar web en iframe CU01172E

Mario R. Rancel

Re:JavaScript window.history, screen y frames. Cargar web en iframe CU01172E

Preguntas y respuestas