Autor Tema: JavaScript location.href devuelve about:blank no funciona. innerWidth CU01173E  (Leído 5607 veces)

isse

  • Sin experiencia
  • *
  • APR2.COM
  • Mensajes: 2
    • Ver Perfil
Buenos días. Estoy haciendo el ejercicio CU01173E del curso de Javascript desde 0.

Pero no logro obtener la url del popup ni las dimensiones correctas del viewport.

El código es el siguiente:

Código: [Seleccionar]
window.onload = function () {
    var ejemplo = document.getElementById('ejemplo');
    ejemplo.addEventListener("click", ejecutarEjemplo);   

    ventanaPadre =  window.location.href; 

    var msg = "Info: ";
    msg = "Url ventana padre: " + ventanaPadre;

    var nuevoElem = document.createElement("p");
nuevoElem.id = "info";
var nuevoCont = document.createTextNode(msg);
nuevoElem.appendChild(nuevoCont);
document.body.appendChild(nuevoElem);
}
function ejecutarEjemplo () {
    var nuevaVentana = window.open ('http://aprendeaprogramar.es', 'miNombre', 'width=300, height=300, resizable=true, menubar=yes');
    nuevaVentana.focus();

    var cerrada =  nuevaVentana.closed;

var innerWidth = nuevaVentana.innerWidth || nuevaVentana.document.documentElement.clientWidth || nuevaVentana.document.body.clientWidth;
var innerHeight = nuevaVentana.innerHeight || nuevaVentana.document.documentElement.clientHeight || nuevaVentana.document.body.clientHeight;
    var dimensiones =  innerWidth + " x " + innerHeight;

    var numFrames = nuevaVentana.length;
    var name = nuevaVentana.name;
    var url =  nuevaVentana.location.href; 
    var dimensionTotal =  nuevaVentana.outerWidth+ " x " + nuevaVentana.outerHeight;
    var desplzH = nuevaVentana.pageXOffset;
    var desplzY = nuevaVentana.pageYOffset;

    msg = " Ventana POPUP ::: <br>" +
    "<br> - cerrada = " + cerrada +
    "<br> - dimensiones = " + dimensiones +
    "<br> - numFrames = " + numFrames +
    "<br> - url =  " + url +
    "<br> - name = " + name +
    "<br> - dimensionTotal = " + dimensionTotal +
    "<br> - desplzH = " + desplzH +
    "<br> - desplzY = " + desplzY;

    parent.document.getElementById("info").innerHTML = msg;
}

La url me sale about:blank y las dimensiones en Chrome sale 0.

¿Podríais orientarme un poco? Gracias de antemano.

« Última modificación: 14 de Noviembre 2015, 17:55 por Alex Rodríguez »

Ogramar

  • Moderador Global
  • Experto
  • *******
  • Mensajes: 2662
    • Ver Perfil
Re:location.href y innerWidth/innerHeight - Curso Javascript desde 0 - CU01173E
« Respuesta #1 en: 12 de Noviembre 2015, 10:01 »
Hola isse, pega el código completo que estés usando para poder revisarlo (incluyendo html, css y todo lo que sea necesario) y explica con detalle el problema o error que estás obteniendo

Salu2!

isse

  • Sin experiencia
  • *
  • APR2.COM
  • Mensajes: 2
    • Ver Perfil
Re:location.href y innerWidth/innerHeight - Curso Javascript desde 0 - CU01173E
« Respuesta #2 en: 13 de Noviembre 2015, 10:46 »
Hola, pues estoy haciendo el ejercicio de la entrega CU01173E del curso de Javascript desde 0, cuyo anunciado es:

Citar
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 que he creado es:

Código: [Seleccionar]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<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);   

    ventanaPadre =  window.location.href; 

    var msg = "Info: ";

    msg = "Url ventana padre: " + ventanaPadre;

    var nuevoElem = document.createElement("p");
nuevoElem.id = "info";
var nuevoCont = document.createTextNode(msg);
nuevoElem.appendChild(nuevoCont);
document.body.appendChild(nuevoElem);
}
function ejecutarEjemplo () {
    var nuevaVentana = window.open ('http://aprendeaprogramar.es', 'miNombre', 'width=300, height=300, resizable=true, menubar=yes');
    nuevaVentana.focus();

    var cerrada =  nuevaVentana.closed;

var innerWidth = nuevaVentana.innerWidth || nuevaVentana.document.documentElement.clientWidth || nuevaVentana.document.body.clientWidth;
var innerHeight = nuevaVentana.innerHeight || nuevaVentana.document.documentElement.clientHeight || nuevaVentana.document.body.clientHeight;
    var dimensiones =  innerWidth + " x " + innerHeight;

    var numFrames = nuevaVentana.length;
    var name = nuevaVentana.name;
    var url =  nuevaVentana.location.href; 
    var dimensionTotal =  nuevaVentana.outerWidth+ " x " + nuevaVentana.outerHeight;
    var desplzH = nuevaVentana.pageXOffset;
    var desplzY = nuevaVentana.pageYOffset;

    msg = " Ventana POPUP ::: <br>" +
    "<br> - cerrada = " + cerrada +
    "<br> - dimensiones = " + dimensiones +
    "<br> - numFrames = " + numFrames +
    "<br> - url =  " + url +
    "<br> - name = " + name +
    "<br> - dimensionTotal = " + dimensionTotal +
    "<br> - desplzH = " + desplzH +
    "<br> - desplzY = " + desplzY;

    parent.document.getElementById("info").innerHTML = msg;
}
</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>

Pero en los resultados, la url de la nuevaVentana me pone "about:blank" en lugar de "http://aprendeaprogramar.es",
y en las dimensiones del viewport no pone las correctas, me muestra 0x8...

« Última modificación: 13 de Noviembre 2015, 10:48 por isse »

Ogramar

  • Moderador Global
  • Experto
  • *******
  • Mensajes: 2662
    • Ver Perfil
Hola, ya he visto lo que ocurre, es extraño. Pienso que puede estar relacionado con restricciones de seguridad que establecen los navegadores a la hora de acceder u operar con otros dominios.

Me refiero a lo siguiente: tú estás bajo un dominio que en tu caso me imagino que estás corriendo el código en tu propio pc, por tanto tu url es una ruta local tipo C:/... que es lo que el navegador identifica como tu dominio. Al abrir la ventana nueva ya estás operando sobre otro dominio y los navegadores restringen la operación sobre información concerniente a otro dominio. La forma de comprobarlo sería subir el código a un servidor y probar el código abriendo una ventana con una url dentro del mismo dominio. Si en ese caso funciona correctamente esto confirmaría que se trata de lo que te he indicado.

Salu2

Mario R. Rancel

  • Administrador
  • Experto
  • ********
  • APR2.COM
  • Mensajes: 1978
    • Ver Perfil
Buenos días, la explicación de seguridad y terceros dominios no parece justificarlo (tras hacer una prueba subiendo archivos a un servidor y probando bajo un mismo dominio)... 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

 

Sobre la educación, sólo puedo decir que es el tema más importante en el que nosotros, como pueblo, debemos involucrarnos.

Abraham Lincoln (1808-1865) Presidente estadounidense.

aprenderaprogramar.com: Desde 2006 comprometidos con la didáctica y divulgación de la programación

Preguntas y respuestas

¿Cómo establecer o cambiar la imagen asociada (avatar) de usuario?
  1. Inicia sesión con tu nombre de usuario y contraseña.
  2. Pulsa en perfil --> perfil del foro
  3. Elige la imagen personalizada que quieras usar. Puedes escogerla de una galería de imágenes o subirla desde tu ordenador.
  4. En la parte final de la página pulsa el botón "cambiar perfil".