Autor Tema: Retroceder página anterior navegador código window.history JavaScript CU01172E (Leído 3014 veces)

Dimitar Stefanov · « **en:** 07 de Abril 2016, 13:06 »

Buenas tardes. Aquí os dejo una posible solución del ejercicio CU01172E del curso JavaScript desde cero.

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.

El código JavaScript:

Código: [Seleccionar]

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Ejemplo aprenderaprogramar.com</title>
	<style type="text/css">
	div{
		border: solid;
		position: relative;
		float: left;
		border-radius: 40px;
		background-color: yellow;
		font-size: 24px;
		padding: 2px;
	}
	</style>
	<script type="text/javascript">

		window.onload = function(){
			var divs = document.getElementsByTagName('div');
			for(var i=0;i<divs.length;i++){
				divs[i].addEventListener('click',cambiarSrc);
			}
		}

		function cambiarSrc(){
			var iframes = document.getElementsByTagName('iframe');
			var divs = this.id;
			switch(divs){
				case 'div01':
				iframes[0].src = 'http://clarin.com';
				break;
				case 'div02':
				iframes[1].src = 'http://eluniversal.com.mx';
				break;
				case 'div03':
				iframes[0].src = 'http://elmercurio.cl';
				break;
				case 'div04':
				iframes[1].src = 'http://elcomercio.pe';
				break;
				case 'div05':
				iframes[0].src = 'http://elespectador.com';
				break;
				case 'div06':
				iframes[1].src = 'http://elmundo.es';
				break;
			}
		}
	

	</script>
</head>
<body>
	<div id="div01"><a href="#">clarin.com</a></div>
	<div style="float: right" id="div02"><a href="#">eluniversal.com.mx</a></div><br><br>
	<div id="div03"><a href="#">elmercurio.cl</a></div>
	<div style="float: right" id="div04"><a href="#">elcomercio.pe</a></div><br><br>
	<div id="div05"><a href="#">elespectador.com</a></div>
	<div style="float: right" id="div06"><a href="#">elmundo.es</a></div><br><br><br>
	<iframe src="" frameborder="1" width="500" height="500"></iframe>
	<iframe src="" frameborder="1" style="float: right;" width="500" height="500"></iframe>
</body>
</html>

Lo que no entiendo porque en el primer iframe no se muestra el scroll de abajo.

Gracias.

Mario R. Rancel · « **Respuesta #1 en:** 10 de Abril 2016, 20:30 »

Buenas tardes

Todo conforme a lo solicitado en el ejercicio; hay una explicación sobre por qué aparecen o no los scrolls en https://www.aprenderaprogramar.com/foros/index.php?topic=4165.0

Saludos

Dimitar Stefanov · « **Respuesta #2 en:** 11 de Abril 2016, 13:06 »

Buenas tardes, Mario.

Acabo de ver el hilo que me habías adjuntado. Por lo visto le ha pasado a más compañeros míos. Así que es según la página relacionada con el iframe y no tiene nada que ver con el código.

Gracias por corregirme el ejercicio y por la dedicación de tu tiempo.

Saludos.

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

Noticias: