Objeto window JavaScript. Propiedades innerWidth, name, outerHeight, pageXOffset, screenX, top... (CU01173E)

Resumen: Entrega nº73 del curso "Tutorial básico del programador web: JavaScript desde cero".
Codificación aprenderaprogramar.com: CU01173E

 

 

WINDOWJAVASCRIPT

Hemos visto distintas propiedades del objeto window, que a su vez se constituyen en objetos que disponen de sus propias propiedades y métodos. Ya conocemos muchas de las propiedades y métodos del objeto window, pero vamos ahora a repasar algunas y estudiar otras nuevas.

logo javascript

 

Recordemos que de forma aproximada puede representarse la jerarquía de objetos JavaScript de la siguiente manera.

jerarquia objetos javascript

 

 

Un objeto window representa una ventana cuya organización interna es conforme al DOM (document object model). En un navegador donde tengamos abiertas varias pestañas, cada pestaña equivale a un objeto window que tiene su propia propiedad document y con el que podemos trabajar por separado. Desde esta perspectiva, cada pestaña es un objeto window. No obstante, hay algunos métodos que sólo se pueden aplicar sobre ventanas abiertas mediante JavaScript y no a la ventana principal de navegación del usuario.

No tiene interés conocer de memoria cuáles son todas las propiedades de los objetos window, pero sí al menos tener una idea o referencia que nos permita buscar información cuando nos resulte necesario.

Vamos a citar aquí de forma breve propiedades de los objetos window. Tener en cuenta que usando JavaScript podemos crear ventanas auxiliares para mostrar al usuario distinto contenido, y que dichas ventanas auxiliares también son objetos window. Cuando hablamos de dimensiones, posicionamiento y coordenadas, pueden obtenerse resultados extraños si se trabaja con más de un monitor.

PROPIEDAD

UTILIDAD

EJEMPLOS aprenderaprogramar.com

closed

Devuelve un valor booleano que indica si un objeto window creado previamente está cerrado o no

if (myWindow.closed) {alert('La ventana fue cerrada');}

//Se muestra el mensaje si la ventana fue cerrada

document

Devuelve el objeto document asociado a la ventana.

Ya vistos durante el curso

frames

Ya estudiado. Ver entregas anteriores.

Ya estudiado. Ver entregas anteriores.

history

Ya estudiado. Ver entregas anteriores.

Ya estudiado. Ver entregas anteriores.

innerHeight

Devuelve la altura en píxeles del área de contenidos (viewport) del navegador incluyendo scrollbar si existe.

alert ('Altura en px del viewport es: '+window.innerHeight);

// Por ejemplo 820

innerWidth

Devuelve la anchura en píxeles del área de contenidos (viewport) del navegador incluyendo scrollbar si existe.

alert ('Anchura en px del viewport es: '+window.innerWidth);

// Por ejemplo 1130

length

Devuelve el número de elementos frame ó iframe presentes en la ventana.

alert ('Elementos frame o iframe: '+window.length);

// Por ejemplo 0

location

Ya estudiado. Ver entregas anteriores.

Ya estudiado. Ver entregas anteriores.

name

Devuelve o establece el nombre de una ventana. Una ventana no tiene que tener nombre obligatoriamente aunque puede ser útil para diferenciar entre ventanas si hay varias.

window.name='Aprender a programar';

alert ('Valor name de ventana es: '+window.name);

// Valor name de ventana es Aprender a programar

navigator

Ya estudiado. Ver entregas anteriores.

Ya estudiado. Ver entregas anteriores.

opener

Si desde una ventana se ha abierto otra, opener devuelve una referencia a la ventana “generadora” o ventana desde la que se invocó la apertura de la ventana actual. Si es la ventana inicial de navegación, opener devuelve null.

if (window.opener){alert ('Nombre de la ventana que abrió esta: '+window.opener.name); }

//Devuelve el nombre si existe una ventana padre

outerHeight

Devuelve la altura en píxeles de la ventana completa hasta el límite exterior de sus bordes (quedando dentro de esta medida barras de menú, barras de estado, etc.).

alert ('Dimension vertical total: '+window.outerHeight);

// Por ejemplo 1040

outerWidth

Devuelve el ancho en píxeles de la ventana completa hasta el límite exterior de sus bordes (quedando dentro de esta medida barras de menú, barras de estado, etc.).

alert ('Dimension horizontal total: '+window.outerWidth);

// Por ejemplo 1296

pageXOffset

Valor en píxeles indicativo de cuánto scroll se ha realizado en sentido horizontal.

alert ('Scroll horizontal realizado: '+window.pageXOffset);

// 0 si no hay barra de scroll horizontal o no se ha hecho scroll

pageYOffset

Valor en píxeles indicativo de cuánto scroll se ha realizado en sentido vertical.

alert ('Scroll vertical realizado: '+window.pageYOffset);

// 0 si no hay barra de scroll vertical o no se ha hecho scroll

scrollX

Igual que pageXOffset. Se recomienda usar pageXOffset.

Igual que pageXOffset. Se recomienda usar pageXOffset.

scrollY

Igual que pageYOffset. Se recomienda usar pageYOffset.

Igual que pageYOffset. Se recomienda usar pageYOffset.

parent

Referencia a la ventana que aloja una subventana (es decir, ventana que aloja un frame o iframe típicamente). Si no existe parent, devuelve una referencia a sí misma (la propia ventana).

window.name = 'Aprender programación';    

alert ('Mi propio nombre es: '+window.parent.name);

// Mi propio nombre es: Aprender programación

screen

Ya estudiado. Ver entregas anteriores.

Ya estudiado. Ver entregas anteriores.

screenLeft

Igual que screenX. Se recomienda usar screenX.

Igual que screenX. Se recomienda usar screenX.

screenTop

Igual que screenY. Se recomienda usar screenY.

Igual que screenY. Se recomienda usar screenY.

screenX

Devuelve la coordenada X relativa a la pantalla (screen). Origen lateral izquierdo de la pantalla. Valor en pixels.

alert ('Ventana a: '+window.screenX + ' pixels del borde izquierdo de pantalla');

// Por ejemplo Ventana a: 0 pixels del borde izquierdo de pantalla

Nota: dependiendo del monitor y del navegador se pueden obtener valores negativos (por ejemplo: -1024x0 a 0x768).

screenY

Devuelve la coordenada Y relativa a la pantalla (screen). Origen borde superior de la pantalla. Valor en pixels.

alert ('Ventana a: '+window.screenY + ' pixels del borde superior de pantalla');

// Por ejemplo Ventana a: 0 pixels del borde superior de pantalla

Nota: dependiendo del monitor y del navegador se pueden obtener valores negativos como origen.

self

Devuelve una referencia a la propia ventana

if (window.self.name){ alert ('Mi nombre es: ' + window.self.name);} else {alert('No tengo nombre');}

top

Devuelve una referencia a la ventana principal (ventana más alta en la jerarquía de ventanas)

if (window.top){ alert ('Soy la ventana principal');}

// Soy la ventana principal si es la principal

Otras

Existen otras propiedades, algunas no estandarizadas.

No veremos ejemplos

 

 

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

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

Para comprobar si tus respuestas y código son correctos puedes consultar en los foros aprenderaprogramar.com.

 

 

 

 

 

 

Para acceder a la información general sobre este curso y al listado completo de entregas pulsa en este link:  Ver curso completo.

Para  hacer un comentario o consulta utiliza los foros aprenderaprogramar.com, abiertos a cualquier persona independientemente de su nivel de conocimiento.

Donar o colaborar

Este sitio se mantiene abierto gracias al apoyo de muchas personas. Si crees que merece la pena apoyar económicamente este sitio web puedes realizar una donación o colaborar. Contacta con nosotros.

¿Puedo yo aprender?

Seas o no del área informática, si quieres aprender a programar te ofrecemos una solución guiada y personalizada: realizar un curso tutorizado on-line. Con este tipo de curso, podrás aprender a programar de forma ágil y amena.

Acceder a detalles y precios de los cursos tutorizados on-line

Política sobre cookies

Utilizamos cookies propias y de terceros para ofrecerte una mejor experiencia y servicio, de acuerdo a tus hábitos de navegación.

Si continúas navegando, consideramos que aceptas su uso. Puedes obtener más información en nuestra Política de Cookies.

En Facebook!

Ahora puedes seguirnos en Facebook. Noticias, novedades y mucho más ¡Te esperamos!

RANKING APR2+

Ranking de lenguajes y entornos de programación aprenderaprogramar.com
 

SEPTIEMBRE - OCTUBRE 2017

1. Java / J2EE
2. Entornos Oracle
3. Entornos SQL Server
4. .NET, C#
5. JavaScript, jQuery
6. HTML, CSS
7. Php, MySql
8. Android, iOS


Acceder a detalles sobre el ranking de programación aprenderaprogramar.com

FOROS APR2+

Pregunta, responde, consulta, lee, intercambia...

Participa!!! Entra en los foros aprenderaprogramar.com.

             Copyright 2006-2017 aprenderaprogramar.com                La web abierta a cualquier persona interesada en la programación