Autor Tema: Error: Permission denied to access property "innerHeight" JavaScript CU01173E (Leído 2993 veces)

Dimitar Stefanov · « **en:** 12 de Abril 2016, 14:04 »

Buenas tardes.

Aquí os dejo una posible solución del ejercicio CU01173E del curso JavaScript desde cero.

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

Código: [Seleccionar]

 <!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>

Citar

Añade el código JavaScript necesario para mostrar esta información por pantalla.

La solución:

Código: [Seleccionar]

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Ejemplo aprenderaprogramar.com</title>
	<script type="text/javascript">	

	var nuevaVentana = 33;

	window.onload = function(){
		var ejemplo = document.getElementById('ejemplo');
		ejemplo.addEventListener('click',ejecutarEjemplo);
	}

	function ejecutarEjemplo(){
		nuevaVentana = window.open ('http://aprendeaprogramar.es', 'miNombre', 'width=300, height=300, resizable=true, menubar=yes');
		nuevaVentana.focus();
		var datosNuevaVentana = function (){
			alert('La ventana está cerrada?: '+nuevaVentana.closed+'\nLa altura, en píxeles, de la nueva ventana es: '+nuevaVentana.innerHeight+'\nLa anchura, en píxeles, de la nueva ventana es: '+nuevaVentana.innerWidth+'\nNúmero de frames: '+nuevaVentana.length+'\nLa url de la nueva ventana es: '+nuevaVentana.location.href+'\nEl nombre de la nueva ventana es: '+nuevaVentana.name+'\nLa altura, en píxeles, de la nueva ventana completa hasta el límite exterior de sus bordes es: '+nuevaVentana.outerHeight+'\nLa anchura, en píxeles, de la nueva ventana completa hasta el límite exterior de sus bordes es: '+nuevaVentana.outerWidth+'\nLa coordenada X relativa a la pantalla es: '+nuevaVentana.screenX+'\nLa coordenada Y relativa a la pantalla es: '+nuevaVentana.screenY);
		};
		datosNuevaVentana();
	}

	function comprobar(){
		nuevaVentana.focus();
		alert('La ventana está cerrada?: '+nuevaVentana.closed+'\nLa altura, en píxeles, de la nueva ventana es: '+nuevaVentana.innerHeight+'\nLa anchura, en píxeles, de la nueva ventana es: '+nuevaVentana.innerWidth+'\nNúmero de frames: '+nuevaVentana.length+'\nLa url de la nueva ventana es: '+nuevaVentana.location.href+'\nEl nombre de la nueva ventana es: '+nuevaVentana.name+'\nLa altura, en píxeles, de la nueva ventana completa hasta el límite exterior de sus bordes es: '+nuevaVentana.outerHeight+'\nLa anchura, en píxeles, de la nueva ventana completa hasta el límite exterior de sus bordes es: '+nuevaVentana.outerWidth+'\nLa coordenada X relativa a la pantalla es: '+nuevaVentana.screenX+'\nLa coordenada Y relativa a la pantalla es: '+nuevaVentana.screenY);
	}

	function comprobarNuevaVentana(){
		alert(nuevaVentana);
	}

	</script>
</head>
<body>
	<div id="cabecera">
		<h2>Cursos aprenderaprogramar.com</h2>
		<h3>Ejemplo JavaScript</h3>
	</div>
	<div id="ejemplo" style="color: blue; margin: 20px;">Pulsa aquí</div>
	<div onclick="comprobar()">Comprobar</div>
	<div onclick="comprobarNuevaVentana()">Comprobar valor nuevaVentana</div>
</body>
</html>

He creado dos funciones de más. El cometido de la función "comprobar()" es ver si puedo acceder a las propiedades y métodos de la variable "nuevaVentana". La conclusión es que a algunos puedo y a otros no. Concretamente, a las propiedades relacionadas con las dimensiones de la nueva ventana, como "nuevaVentanta.innerWidth" no puedo acceder si no es desde la misma función que crea la nueva ventana.

No sé porque se produce dicho fenómeno. Pienso que es porque al hacer click sobre el div que lleva asociada la función "comprobar()" la ventana creada pierde el focus y es inaccesible para el navegador. La depuradora del navegador me da el siguiente error:
"permission denied to access property...".

La otra función "comprobarNuevaVentana" la creé para comprobar si puedo acceder a la variable "nuevaVentana". Por eso también definí dicha variable como global y no como local. Antes de crear la nueva ventana y que la variable apuntara hacia la misma si se puede acceder a la variable, pero después de dicha creación ya me de el error: "permission denied to access property Symbol". No entiendo porque se produce ese comportamiento. Lo único que se me ocurre es porque la nueva ventanta pierda focus, pero no estoy seguro. No estoy muy convencido de ello, porque en la función "comprobar" invoco nuevamente el método "nuevaVentana.focus()" y tampoco me permite acceder a según qué propiedades de la nueva ventana.

Gracias.

Mario R. Rancel · « **Respuesta #1 en:** 15 de Abril 2016, 22:27 »

Buenas tardes desde mi punto de vista el ejercicio está bien resuelto

Este ejercicio presenta algunos problemas quizás no adecuados para un curso básico por ser más avanzados

He estado revisando otros hilos y en este ya encontrábamos algunos detalles un tanto extraños sobre este ejercicio: https://www.aprenderaprogramar.com/foros/index.php?topic=3614.0

Pero no comentamos nada sobre el error que aparece Error: Permission denied to access property "innerHeight"

Habíamos citado en otros hilos dos problemas: bien restricciones de seguridad cuando se trabaja con un dominio diferente al de la página matriz, o bien que la carga de la ventana se pospone en el tiempo quedando algunas propiedades como no accesibles.

Con lo que has indicado tenemos otra posible explicación. Tal como comentas:

"nuevaVentanta.innerWidth" no puedo acceder si no es desde la misma función que crea la nueva ventana.

Esto podría ser una restricción de seguridad de algunos navegadores.

He probado en Chrome y se muestra el siguiente mensaje de error en la consola: prueba.html:26 Uncaught SecurityError: Blocked a frame with origin "null" from accessing a frame with origin "http://aprendeaprogramar.es". The frame requesting access has a protocol of "file", the frame being accessed has a protocol of "http". Protocols must match.

En este caso parece estar haciendo referencia al uso de distintos protocolos / dominios en las distintas ventanas y al hecho de tratar acceder desde una a la otra.

Es una buena forma de ver algunos problemas que pueden surgir durante los desarrollos, pero en el marco del curso no le daría mayor importancia

Saludos

Dimitar Stefanov · « **Respuesta #2 en:** 21 de Abril 2016, 14:06 »

Buenas tardes, Mario.

Gracias por corregirme el ejercicio y por explicarme por qué motivo podrían producirse los errores.

Miré el enlace que me comentas en tu respuesta y veo que que también el compañero pedro,, como otros compañeros han tenido algún que otro problema a la hora de resolver este ejericicio.

Gracias por tu tiempo.

Atentamente,

dimiste.

Foros aprenderaprogramar.com
Didáctica y divulgación de la programación

Noticias: