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/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
Tema: Load denied by X-Frame-Options: x does not permit cross-origin framing CU01172E (Leído 3768 veces)
RSS -
WAP2