Hola. Dejo el ejercicio CU01173E objeto window javascript propiedades innerwidth length name opener, del taller gratuito de programación web de aprenderaprogramar.
EJERCICIOEl siguiente código crea una ventana cuando se pulsa en el texto “Pulsa aquí”. Esta ventana es asignada a una variable u objeto denominado nuevaVentana. Queremos conocer las siguientes propiedades del objeto nuevaVentana y mostrarlas por pantalla: si está cerrada o no, dimensiones del viewport, número de frames presentes en ella, url a la que apunta, valor de name, dimensiones de la ventana completa hasta los bordes exteriores y cuántos píxeles está desplazada en horizontal y vertical respecto al punto origen de la pantalla
<!DOCTYPE html>
<html><head><title>Ejemplo aprenderaprogramar.com</title><meta charset="utf-8">
<script type="text/javascript">
window.onload = function () {
var ejemplo = document.getElementById('ejemplo');
ejemplo.addEventListener("click", ejecutarEjemplo);
}
function ejecutarEjemplo () {
var nuevaVentana = window.open ('http://aprendeaprogramar.es', 'miNombre',
'width=300, height=300, resizable=true, menubar=yes');
nuevaVentana.focus();
}
</script>
</head>
<body><div id="cabecera">
<h2>Cursos aprenderaprogramar.com</h2>
<h3>Ejemplos JavaScript</h3>
</div>
<div style="color:blue; margin:20px;" id ="ejemplo">Pulsa aquí</div>
</body>
</html>
Añade el código JavaScript necesario para mostrar esta información por pantalla.
Código añadido<!DOCTYPE html>
<html>
<head>
<title>Ejemplo aprenderaprogramar.com</title>
<meta charset="utf-8">
<script type="text/javascript">
var msg;
window.onload = function ()
{
var ejemplo = document.getElementById('ejemplo');
ejemplo.addEventListener("click", ejecutarEjemplo);
var OpenClose = document.getElementById('abierCerr');
OpenClose.addEventListener("click", abiertaCerrada);
var cerrarV = document.getElementById('cerrarVentana');
cerrarV.addEventListener("click", cerrar);
}
function ejecutarEjemplo ()
{
msg="";
nuevaVentana=window.open ('http://aprenderaprogramar.com', 'miNombre', 'width=300, height=300, resizable=true, menubar=yes');
nuevaVentana.focus();
msg=msg+"<strong>Las dimensiones del viewport, son : "+nuevaVentana.innerHeight+" de Alto "+nuevaVentana.innerWidth+" Ancho<br/>";
msg=msg+"Número frames presentes en la nueva pagina : "+ nuevaVentana.frames.length+"<br/>";
msg=msg+"La URL a la que apunta es "+nuevaVentana.location.href+"<br/>";
msg=msg+"valor de name es : "+nuevaVentana.name+"<br/>";
msg=msg+"Las dimensiones de la ventana completa hasta los bordes exteriores son : "+nuevaVentana.outerHeight+"px de alto x "+nuevaVentana.outerWidth+" px de ancho<br/>"
msg=msg+"Y está desplazada "+nuevaVentana.pageYOffset+" píxeles en horizontal y "+window.pageXOffset+" píxeles en vertical respecto al punto origen de la pantalla"
msg=msg+"</strong>"
document.all.pizarra.innerHTML=msg;
}
function abiertaCerrada()
{
if (nuevaVentana.closed==true){alert("La nueva ventana esta cerrada");}
else {alert("La ventana esta abierta");}
}
function cerrar()
{
msg="";
document.all.pizarra.innerHTML=msg;
nuevaVentana.close();
}
</script>
</head>
<body>
<div id="cabecera">
<h1>Cursos aprenderaprogramar.com</h1>
<h3>Ejemplos JavaScript</h3>
</div>
<div id="botones">
<div class="boton" id ="ejemplo">Pulsa aquí para abrir una ventana</div>
<div class="boton" id ="cerrarVentana">Pulsa aquí para cerrar ventana</div>
<div class="boton" id ="abierCerr">Ventana Abierta/cerrada</div>
</div>
<div id="pizarra"></div>
</body>
</html>
<style type="text/css">
body{
background-color:yellow;
}
#botones{margin-left:200px;}
.boton{
text-align:center;
width:300px;
border:outset white 2px;
border-radius:25px 25px;
box-shadow:3px 3px 2px 2px #AFF6AF;
color:blue;
margin-left:5px;
padding:3px;
float:left;
background-color:#90EE90;
color:black;
font-size:19px;
}
.boton:hover {
border:inset 2px green;
box-shadow:3px 3px 2px 2px #0BF50B ;
}
.boton:active{
border:inset 2px green;
filter: invert(100%);
}
#pizarra
{
width:800px;
height:300px;
margin-top:125px;
margin-left:400px;
}
h1,h3 {text-align:center;}
</style>
He estado dandole vueltas al codigo por si tenia un error ya que en chrome da estos resultados del viewport : Las dimensiones del viewport, son : 0 de Alto 0 Ancho
y en firefox estos otros :Las dimensiones del viewport, son : 300 de Alto 300 Ancho.
Por lo visto y por lo que he podido ver en el foro a todos nos ha pasado lo mismo, se ve que es un problema del navegador. Lo mismo que pasa con La URL a la que apunta es about:blank
Y la explicación parece ser esta que da Mario R. Rancel con la que estoy totalmente de acuerdo.
https://aprenderaprogramar.com/foros/index.php?topic=3614.msg15693#msg15693Gracias por corregirme los ejercicios. Un saludo
Tema: Objeto window javascript propiedades innerwidth length name Ejercicio CU01173E (Leído 2052 veces)
RSS -
WAP2