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

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

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