Foros aprenderaprogramar.com
Aprender a programar => C, C++, C#, Java, Visual Basic, HTML, PHP, CSS, Javascript, Ajax, Joomla, MySql y más => Mensaje iniciado por: paramonso en 18 de Marzo 2018, 10:12
-
Hola. Dejo la solución al ejercicio CU01172E retroceder pagina anterior JavaScript window history screen frames, del curso básico de programación web de aprenderaprogramar.
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.
<!DOCTYPE html>
<html>
<head>
<title>Ejemplo aprenderaprogramar.com</title>
<meta charset="utf-8">
<script type="text/javascript">
window.onload = function()
{
var cogerBoton=document.getElementsByClassName("boton");
var frameIz= document.getElementById("frame1");
var frameDe= document.getElementById("frame2");
cogerBoton[0].onclick = function (){frameIz.src = 'https://www.clarin.com'};
cogerBoton[1].onclick = function (){frameIz.src = 'http://impresa.elmercurio.com/'};
cogerBoton[2].onclick = function (){frameIz.src = 'http://www.elespectador.com/ '};
cogerBoton[3].onclick = function (){frameDe.src = 'http://www.eluniversal.com.mx' };
cogerBoton[4].onclick = function (){frameDe.src = 'http://www.elcomercio.pe'};
cogerBoton[5].onclick = function (){frameDe.src = 'http://www.elmundo.es/'};
}
</script>
<style type="text/css">
body{background-color:yellow;}
h1{
text-align:center;
margin:15px;
padding:0;
}
.boton {
display:inline;
border:outset white 2px;
width:200px;
border-radius:25px 25px;
box-shadow:3px 3px 2px 2px #AFF6AF;
text-align:center;
background-color:#90EE90;
color:green;
font: oblique bold 120% cursive;
margin:15px;
padding:5px;
}
.boton:hover {
box-shadow:3px 3px 2px 2px #0BF50B ;
border:outset 2px green;
}
.boton:active{
border:inset 2px green;
filter: invert(100%);
}
#botones1
{
width:500px;
height:45px;
float:left;
margin-left:120px
}
#botones2
{
height:45px;
width:500px;
float:left;
margin-left:150px
}
iframe{
background-color:white;
width:550px;
height:500px;
margin-top:10px;
padding:0px;
margin-left:50px;
}
</style>
</head>
<body>
<div id="cabecera">
<h1>Cursos aprenderaprogramar.com Ejercicio CU01172E</h1>
</div>
<div id="botones1">
<div class="boton" >El Clarin</div>
<div class="boton" >El Mercurio</div>
<div class="boton" >El Espectador</div>
</div>
<div id="botones2">
<div class="boton" >El Universal</div>
<div class="boton" >El Comercio</div>
<div class="boton" >El Mundo</div>
</div>
<iframe name="frame1" id="frame1"> </iframe>
<iframe name="frame2" id="frame2"> </iframe>
</body>
</html>
Al ejecutar el código parece que todas las páginas se cargan bien menos la de elespectador.com. Al activar el modo consola me da este error.
Refused to display 'https://www.elespectador.com/noticias' in a frame because it set 'X-Frame-Options' to 'sameorigin'.
Por lo que he visto en algunas páginas buscando el porqué de este error se debe a que esta pagina activa cabecera X-Frame-Options que sirve para prevenir que la página pueda ser abierta en un frame, o iframe. De esta forma se pueden prevenir ataques de clickjacking sobre la web.
https://www.wpdoctor.es/cabecera-x-frame-options-para-mejorar-la-seguridad-de-tu-web/ (https://www.wpdoctor.es/cabecera-x-frame-options-para-mejorar-la-seguridad-de-tu-web/)
He probado el código en tres navegadores y me pasa lo mismo en los tres. Yo pensaba que era un defecto de chrome pero por lo visto es porque la pagina desactiva los iframes.
Al cargar esta página sin el iframe se carga bien.
¿Esto es así o me estoy liando?
Gracias. Un saludo ;)
-
Buenas, todo bien aunque en este ejercicio me ha dado algo de problemas el CSS que has introducido porque los iframe no me aparecen siempre uno a la izquierda y otro a la derecha. No creo que sea aquí el lugar para hablar de CSS ya que en la web hay un curso específico sobre CSS así que no voy a entrar en esto.
A mí con el espectador me ocurre lo mismo: no carga la web y viendo consola salta el error Load denied by X-Frame-Options: https://www.elespectador.com/noticias does not permit cross-origin framing. Esto se debe a la configuración del servidor de esta web, que rechaza servir la web en frames por seguridad contra ataques, por motivos de copyright o por otras razones. No es una cuestión por tanto del navegador ni del código.
Salu2