JavaScript - Jerarquía de objetos - window

El objeto WINDOW representa una ventana o marco del navegador. Es el elemento raíz de la estructura de objetos de cada página HTML.

Objeto WINDOW

Tiene definidos los eventos: onBlur, onDragDrop, onError, onFocus, onLoad, onMove, onResize, onUnload

Propiedades del objeto WINDOW:

frames : array de marcos (frames) de la ventana actual
closed : vale true si esa ventana ha sido cerrada
defaultStatus : mensaje por defecto que se muestra en la barra de estado de esa ventana
document : objeto document asociado a la ventana
history : historial de URLs visitadas
innerHeight : altura del área de contenido de la ventana (en pixels)
innerWidth : ancho del área de contenido de la ventana (en pixels)
length : número de marcos en la ventana (equivalente a frames.length )
location : objeto location asociado a la ventana. Contiene información sobre el URL actual
locationbar : barra de dirección (URL) del navegador. Contiene a su vez la propiedad ‘visible’ que indica si se muestra o no la barra en la ventana actual.
menubar : barra de menú del navegador. Contiene la propiedad ‘visible’ que indica si se muestra o no la barra en la ventana actual
name : nombre de la ventana
opener : ventana que abrió la ventana actual a través del método open(). Por ejemplo, para saber el nombre de dicha ventana: nombre=window.opener.name;
outerHeight : altura de la ventana en pixels
outerWidth : ancho de la ventana en pixels
pageXOffset : posición horizontal (en pixels) de la página con respecto a la ventana
pageYOffset : posición vertical (en pixels) de la página con respecto a la ventana
parent : representa el nombre de la ventana o marco que contiene a la ventana actual
personalbar : barra de directorios del navegador
scrollbars : barras de desplazamiento del navegador
self : representa la ventana actual
status : mensaje de la barra de estado
statusbar : barra de estado de la ventana
top : representa la ventana de nivel superior (raíz) en una estructura de marcos
window : representa la ventana actual (como self)

Resumen de métodos del objeto WINDOW:

alert() : muestra una ventana de mensajes.
back() : carga la URL anterior de la lista del objeto HISTORY correspondiente a la ventana de nivel superior:
clearInterval() : cancela un temporizador iniciado con setInterval
clearTimeout() : cancela un temporizador iniciado con setTimeout
close() : cierra la ventana especificada (dependiendo de la seguridad implementada en cada navegador puede que sólo funcione con ventanas abiertas con el método open):

otraventana = window.open("")
otraventana.close ()

find() : busca una cadena de texto en el contenido de la ventana especificada:

find (cadena, mayusculas, siguiente)

Si ‘mayusculas’ es true, se lleva a cabo una búsqueda que tiene en cuenta mayúsculas y minúsculas.

Si ‘siguiente’ es true, se busca la siguiente coincidencia.

Si no se especifica ‘cadena’, el navegador lanza la ventana de búsqueda. La función devuelve true si se encontró la cadena.

confirm() : muestra una ventana de confirmación con los botones OK y CANCEL. Devuelve ‘true’ si el usuario pulsa OK y ‘false’ en caso contrario.
focus() : asigna el foco a un objeto
forward() : carga la siguiente URL de la lista del objeto HISTORY
handleEvent() : llama a la función encargada de manejar el evento especificado.
home() : carga la URL definida como ‘HOME’ en el navegador
moveTo() : mueve la ventana a las coordenadas especificadas, p.e. window.moveTo(25,10)
print() : imprime el contenido de la ventana
resizeBy() : redimensiona la ventana moviendo la esquina inferior derecha a las coordenadas especificadas
resizeTo() : redimensiona la ventana a los nuevos valores de ancho y alto

window.moveTo (100,100);

// redimensionar a 400x400 pixels
window.resizeBy (500, 500);

// redimensiona a 400x400 ixels
window.resizeTo (400, 400);

scrollBy() : desplaza el contenido de la ventana la cantidad indicada
scrollTo() : desplaza el contenido de la ventana
stop() : detiene el proceso de carga de la página actual

open()

El método open se utiliza para abrir nuevas ventanas del navegador. Los parámetros son:

open ( URL, nombre_de_la_ventana, opciones);

Las opciones se especifican mediante una secuencia de pares ‘parametro=valor’ separados por comas (sin espacios en medio)

Algunas opciones del método open( )

dependent : crea una ventana hija de la ventana actual. Esta ventana se cerrará automáticamente cuando lo haga su ventana padre.
height : altura de la ventana (en pixels)
location : si es ‘yes’, crea una entrada para las direcciones (URLs) en la nueva ventana
menubar : si es ‘yes’, crea una barra de menú en la nueva ventana
resizable : si es ‘yes’, el usuario podrá redimensionar la ventana
scrollbars : si es ‘yes’, aparecerán barras de desplazamiento en la nueva ventana (cuando el documento supere las dimensiones de la misma)
status : si es ‘yes’, la nueva ventana tendrá barra de estado
titlebar : si es ‘yes’, aparecerá la barra de título en la nueva ventana
toolbar : si es ‘yes’, la ventana tendrá barra de herramientas
width : ancho de la ventana (en pixels)

Por ejemplo:

// para abrir una página en una nueva ventana:
window.open ("pagina2.html", "ventana2");

// Una nueva ventana con barra de menu, pero sin barra de estado, ni entrada para direcciones
window.open ("pagina2.html", "ventana2",    "status=no,location=no,menubar=yes");

Si no se especifica URL, la ventana se abre sin cargar ninguna página. Si la ventana ya existe, no se borra la página que está cargada en ese momento.

El siguiente ejemplo abre una nueva ventana y construye su contenido de forma dinámica (on-the-fly):

<html>
   <head>
      <script>
         function abreNuevaVentana(nombreVentana)
         {
            // abrir una nueva ventana con el nombre pasado como parámetro
            // no se especifica una URL
            miVentana= open("",nombreVentana,
            "width=500,height=400,status=yes,toolbar=yes,menubar=yes");

            // Abre la corriente de datos del documento para escribir
            miVentana.document.open();
            
            // Crea el documento
            miVentana.document.write("<html><head><title>On-the-fly");
            miVentana.document.write("</title></head><body>");
            miVentana.document.write("<h1>Creando documentos al vuelo</h1>");
            miVentana.document.write("<p>&nbsp;</p>");
            miVentana.document.write("<p>El contenido es din&aacute;mico</p>");
            miVentana.document.write("</body></html>");

            // cierra la corriente de datos del documento
            miVentana.document.close();
         }

      </script>
   </head>
   <body>
      <form>
         <input type="button" value="On-the-fly" onClick="abreNuevaVentana('nueva')">
      </form>
   </body>
</html>

setInterval() : establece un temporizador cíclico que se encarga de evaluar una expresión regularmente
setTimeout() : establece un temporizador que evalúa una expresión una vez transcurrido el tiempo asignado

Los métodos setInterval y setTimeout permiten establecer temporizadores en la ventana.

Por ejemplo, el siguiente código muestra un mensaje transcurridos 10 segundos utilizando el método setTimeout:

<html>
   <head>
   <script>
      function temporizador()
      {
         window.setTimeout ("alert('Mensaje')", 10000);
      }
   </script>
   </head>

   <body bgcolor="#FFFFFF">
      <form method="post" action="">
         Muestra un mensaje dentro de 10 segundos
         <input type="button" name="Button" value="ok"    onClick="temporizador();">
      </form>
   </body>
</html>

Para establecer temporizadores cíclicos se utiliza el método setInterval.

Por ejemplo, para establecer un aviso cada 5 segundos:

window.setInterval ("alert ('Han pasado 5 segundos')",    5000);

Siguiente: Objeto document