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: pedro,, en 15 de Diciembre 2015, 22:35
-
Hola, dejo otro ejercicio más.
EJERCICIO
El 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
El código inicial es el siguiente:
<!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>
y el código resuelto este:
<!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);
}
var nuevaVentana;
function ejecutarEjemplo () {
nuevaVentana = window.open ('http://aprendeaprogramar.es', 'miNombre', 'width=300, height=300, resizable=true, menubar=yes');
nuevaVentana.focus();
rellenaDatos();
}
function rellenaDatos(){
if(nuevaVentana.closed==true || nuevaVentana.closed==undefined){
document.getElementById('cerradoOAbierto').innerHTML = 'La ventana está cerrada';
}else{
document.getElementById('cerradoOAbierto').innerHTML = 'La ventana está abierta';
document.getElementById('dimensionesViewport').innerHTML = 'La altura del viewport es: ' + nuevaVentana.innerHeight + ' y la anchura es: ' + nuevaVentana.innerWidth;
document.getElementById('numFrames').innerHTML = 'Hay ' + nuevaVentana.frames.length + ' frames.';
document.getElementById('apuntaA').innerHTML = 'url a la que apuntar: ' + nuevaVentana.location.href;
document.getElementById('valorName').innerHTML = 'El name es: ' + nuevaVentana.name;
document.getElementById('dimensionesVentana').innerHTML = 'La altura de la ventana completa hasta el límite exterior de sus bordes' +
' es: ' + nuevaVentana.outerHeight + ' y su anchura es: ' + nuevaVentana.outerWidth;
document.getElementById('desplazamineto').innerHTML = 'El desplazamiento lateral izquierdo es: ' + nuevaVentana.screenX +
'px, y el desplazamiento desde el borde superior es: ' + nuevaVentana.screenY + 'px.'
}
}
</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>
<div id="cerradoOAbierto"></div>
<div id='dimensionesViewport'></div>
<div id='numFrames'></div>
<div id='apuntaA'></div>
<div id='valorName'></div>
<div id='dimensionesVentana'></div>
<div id='desplazamineto'></div>
</body>
</html>
No entiendo por qué el resultado de esta linea...
document.getElementById('apuntaA').innerHTML = 'url a la que apunta: ' + nuevaVentana.location.href;
... da como resultado about:blank.
También comentar que tanto innerHeight como innerWidth dependiendo del navegador que use, me da un valor u otro. Decir que el único que el único que da un resultado bueno es Firefox. Así que no se si es que hice algo mal o ese es el funcionamiento normal.
Saludos.
-
Hola de nuevo, el about:blank pienso que se explica con lo que se comenta en https://www.aprenderaprogramar.com/foros/index.php?topic=3485.0
Lo que comentas sobre que distintos navegadores dan distintos resultados a mí también me ocurre. En este caso creo que se debe a que algunas de las propiedades no responden igual en los distintos navegadores por no estar suficientemente estandarizadas. Es algo contra lo que no podemos hacer nada, sino conocerlo y tener cuidado. En general para desarrollos complejos o importantes es recomendable hacer pruebas en distintos navegadores e incluso en distintas versiones de navegadores, pero es imposible probarlo todo... A veces los navegadores dependen de detalles, por ejemplo unos pueden admitir width=300, height=300, y otros no admitirlo sin incorporar unidades como width=300px, height=300px. Como las diferencias entre navegadores pueden ser muy sutiles y van cambiando continuamente desde mi punto de vista no conviene prestarle atención (al menos en el marco de un curso como este). Pero ojo, eso no significa que cualquier cosa que no funcione haya achacarlo a la no estandarización de navegadores...
Saludos
-
Hola Mario, lo primero darte las gracias como siempre por tu tiempo.
Ojee el enlace que comentas, y probé lo que comentaba Ogramar, pero sigue dando el mismo resultado, dejo el enlace del ejercicio.
http://aprendehtml.byethost3.com/Ejercicio_CU01173E.html
Desde ahí apunta a otro html que también está en el mismo dominio.
Saludos.
-
Buenos días, pues veo que la explicación de terceros dominios no parece justificarlo... Aquí he encontrado otra posible explicación:
The open() method creates a new secondary browser window, similar to choosing New Window from the File menu. The strUrl parameter specifies the URL to be fetched and loaded in the new window. If strUrl is an empty string, then a new blank, empty window (URL about:blank) is created with the default toolbars of the main window.
Note that remote URLs won't load immediately. When window.open() returns, the window always contains about:blank. The actual fetching of the URL is deferred and starts after the current script block finishes executing. The window creation and the loading of the referenced resource are done asynchronously.
Según esto la posible explicación sería que al hacer window open y ejecutarse el código la ventana se crea como about:blank. Sólo posteriormente, asíncronamente, se carga la url indicada dentro de esa nueva ventana.
Esto nos puede parecer poco intuitivo, pero la lógica estaría en que estamos hablando de milisegundos. El código se ejecutaría de forma que la ventana estaría creada y se muestran las propiedades antes de que la url haya comenzado a cargar (incluso es posible que la url no llegue a cargar si el servidor no responde por ejemplo). En realidad se trata de un detalle de implementación que parece podrían haber hecho de otra manera...
Saludos