| Previous | Table of Contents | Next |
| JavaScript Math Object | JavaScript Document Object |
El objeto de ventana JavaScript se encuentra en la parte superior de la jerarquía de objetos JavaScript y representa la ventana del navegador (o ventanas si tiene más de una ventana del navegador abierta a la vez). Hasta este capítulo nos hemos centrado en los aspectos internos y la sintaxis de JavaScript. En este capítulo comenzaremos a hacer que las cosas sucedan en la pantalla (que, después de todo, es uno de los principales propósitos de JavaScript). El objeto ventana permite a los desarrolladores realizar tareas como abrir y cerrar ventanas del navegador, mostrar diálogos de alerta y solicitud y configurar tiempos de espera (especificando una acción que se llevará a cabo después de un período de tiempo especificado). Aunque los tiempos de espera son una característica del objeto de ventana, los cubriremos en el capítulo de tiempos de espera de JavaScript, en lugar de en este capítulo.
Hacer referencia al objeto de ventana JavaScript
Como se describe en Conceptos Básicos de Objetos JavaScript, generalmente es necesario usar notación de puntos al acceder a las propiedades o métodos de un objeto. Por ejemplo, el siguiente fragmento de script accede al método write() del objeto document:
document.write("Hello");
El objeto window es el objeto de nivel superior de la jerarquía de objetos. Como tal, cada vez que se hace referencia a un método o propiedad de objeto en un script sin el nombre del objeto y el prefijo de punto, JavaScript asume que es un miembro del objeto de ventana. Esto significa, por ejemplo, que al llamar al método window alert () para mostrar un cuadro de diálogo de alerta, la ventana. el prefijo no es obligatorio. Por lo tanto, las siguientes llamadas a métodos logran lo mismo:
window.alert();alert()
informe de este anuncio Propiedades de objetos de ventana de JavaScript
La ventana de JavaScript el objeto contiene una serie de propiedades que se pueden inspeccionar y usar en un script: ventana
- .cerrado: Se usa cuando se manejan varias ventanas, esta propiedad indica si una ventana se ha cerrado o no.ventana
- .defaultstatus / ventana.status-defaultstatus especifica el mensaje predeterminado que se muestra en la barra de estado del navegador. estado especifica un mensaje temporal que se mostrará en la barra de estado del navegador en lugar del predeterminado. Desactivado en muchos navegadores.ventana
- .marcos: Si la ventana contiene marcos, esta matriz contiene la matriz de objetos de marco (consulte detalles de matrices JavaScript sobre el acceso a matrices).
- window.name -Las ventanas abiertas por un script deben recibir un nombre. Esta propiedad contiene el nombre del objeto ventana correspondiente.ventana
- .abridor: Cuando se ha abierto una ventana en un script contenido en otra ventana, esta propiedad de la ventana secundaria contiene una ventana de referencia que la abrió.ventana
- .padre: Cuando se trabaja con marcos en una ventana, esta propiedad contiene una referencia al objeto ventana que contiene el marco.ventana
- .pantalla: Un objeto que contiene información sobre la pantalla en la que se muestra la ventana (las propiedades contenidas en este objeto incluyen altura, ancho, altura de disponibilidad, ancho de disponibilidad y profundidad de color).ventana
- .auto-Una referencia a la ventana actual.ventana
- .top-Una referencia a la ventana de nivel superior cuando se trabaja con marcos.
Abrir ventanas del navegador usando JavaScript
Se puede abrir una nueva ventana del navegador desde un script JavaScript utilizando el método open () del objeto window. La sintaxis para abrir una nueva ventana es la siguiente:
newWindowObj = window.open("URL", "WindowName", "feature, feature, feature ... ");
Lo siguiente proporciona una explicación de los argumentos pasados al método open ():
- URL: Especifica la URL de la página web que se cargará en la nueva ventana. Si no se especifica ninguna URL, se carga una ventana en blanco.
- WindowName-Especifica el nombre de la ventana y se usa para referirse a la ventana.
- características – Una lista separada por comas de funciones que le permiten personalizar la apariencia de la ventana. Las opciones son:
| Configuración | Explicación |
|---|---|
| ancho | Especifica la anchura inicial del navegador de cliente de la ventana (ver innerWidth para el tamaño de área de contenido) |
| altura | Especifica la altura inicial del navegador de cliente de la ventana (ver innerHeight para el tamaño de área de contenido) |
| innerWidth | Especifica el ancho inicial de la ventana de área de contenido |
| innerHeight | Especifica la altura inicial de la ventana de contenido área de |
| outerWidth | Especifica el ancho inicial de la ventana del navegador |
| outerHeight | Especifica la altura inicial de la ventana del navegador |
| barra de herramientas | Especifica si la ventana debe contener la barra de herramientas del navegador o no |
| estado | Especifica si la ventana debe contener el navegador de la barra de estado o no |
| dependiente | Especifica si la ventana se debe cerrar al unísono con su padre ventana |
| de la barra de menú | Especifica si la ventana se debe contiene la barra de menú del navegador |
| ubicación | Especifica si la ventana debe contener el cuadro de ubicación/URL del navegador |
| barras de desplazamiento | Oculta/Muestra barras de desplazamiento horizontales/verticales del navegador |
| redimensionable | Especifica si el usuario tiene derecho a cambiar el tamaño de la ventana después de que aparezca. |
| directorios | Especifica si la ventana debe contener el navegador barra de herramientas personal. |
| copyHistory | Especifica si la nueva ventana debe contener una copia de la URL en la historia de la invocación de la ventana |
| izquierda | Especifica el número de píxeles desde la parte izquierda de la pantalla a la nueva ventana |
| top | Especifica el número de píxeles desde la parte superior de la pantalla a la nueva ventana |
| alwaysLowered | Crea una nueva ventana en la que siempre se coloca debajo de las otras ventanas del navegador. A menudo se usa para esos molestos anuncios pop-under. |
| Siempre promocionado | Crea una nueva ventana que siempre se coloca sobre la parte superior de las otras ventanas del navegador en la pantalla. |
| z-lock | Bloquea el nivel en el que el navegador aparece en relación a otras ventanas del navegador. |
Las características de altura, anchura y posición se establecen mediante números. Las opciones de características restantes se pueden establecer utilizando valores verdaderos o falsos (también se pueden usar sí, no y 1 y 0 en lugar de verdadero y falso). Un atributo ausente se considera falso. El siguiente ejemplo crea una nueva ventana con una barra de menú, una dimensión específica y sin barra de herramientas:
newWindowObj = window.open("URL", "WindowName", "toolbar=0, menubar=1, innerHeight=200, innerWidth=300");
Cerrar ventanas del navegador con JavaScript
Una ventana se puede cerrar con el método close() del objeto window. El nombre de la ventana (especificado en el método open ()) debe ser referenciado al realizar un cierre para que esté seguro de cerrar la ventana correcta. Por ejemplo, el siguiente código crea una nueva ventana y crea un pulsador que, al hacer clic, cierra la nueva ventana:
<script language="JavaScript" type="text/javascript">newWindowObj = window.open ("", "MyWindow");</script><form action="null"> <input type="button" value="Close Window" onclick="newWindowObj.close()" /></form>
También es posible cerrar la ventana que abrió la ventana actual utilizando la propiedad opener del objeto ventana actual:
window.opener.close()
Esto cerrará la ventana que abrió la ventana en la que se ejecuta el script anterior.
Mover y redimensionar Ventanas
Una ventana se puede mover a coordenadas específicas en la pantalla utilizando el método moveTo() del objeto window, que toma las coordenadas x e y como argumentos. El siguiente ejemplo mueve una nueva ventana a la ubicación 100, 200 en la pantalla cuando se presiona el botón» Mover ventana»:
<script language="JavaScript" type="text/javascript">newWindowObj = window.open ("", "MyWindow");</script><form action="null"> <input type="button" value="Move Window" onclick="newWindowObj.moveTo(100, 200)" /></form>
Además de mover una ventana a una nueva ubicación específica, también es posible mover una ventana en relación con su ubicación actual en la pantalla utilizando el método moveBy() del objeto ventana JavaScript. Una vez más, el método toma valores x e y que se agregan a las coordenadas x e y actuales de la ventana especificada. Los valores negativos se pueden utilizar para cambiar la dirección del movimiento:
<script language="JavaScript" type="text/javascript">newWindowObj = window.open ("", "MyWindow");</script><form action="null"> <input type="button" value="Move Window" onclick="newWindowObj.moveTo(100, 200)" /></form>
Los métodos window resizeTo() y resizeBy() funcionan de manera similar, ya que le permiten cambiar el tamaño de una ventana a un tamaño específico o a un nuevo tamaño relativo al tamaño actual.
Cambiar el foco de la ventana
Cuando una ventana es la ventana seleccionada actualmente en la pantalla, se dice que tiene foco. Por lo general, al hacer clic con el puntero del ratón en una ventana, la ventana se enfoca. Con JavaScript es posible cambiar el enfoque de una ventana mediante programación utilizando los métodos focus() y blur (). El siguiente ejemplo muestra una nueva ventana, la difumina para que la ventana de apertura siga estando enfocada y proporciona un botón para cambiar el foco a la nueva ventana:
<script language="JavaScript" type="text/javascript">newWindowObj = window.open ("", "MyWindow");newWindowObj.blur();</script><form action="null"> <input type="button" value="Focus New Window" onclick="newWindowObj.focus()" /></form>
Mostrar cuadros de diálogo de caja de mensajes
El objeto de ventana de JavaScript proporciona métodos para mostrar tres tipos de cuadros de diálogo de mensajes, los de alerta, confirmación y aviso:
- alerta: destinada a mostrar un mensaje al usuario. Contiene un área de mensajes donde se mostrará el mensaje de alerta y un botón «Aceptar» en el que el usuario puede hacer clic para descartar el diálogo. El método alert () toma un solo argumento que representa el mensaje que se mostrará en el diálogo. El siguiente fragmento de página web muestra un cuadro de diálogo de alerta con el mensaje «No tiene una contraseña válida» cuando se hace clic en el botón «Mostrar alerta»:
<form action="null"> <input type="button" value="Show Alert" onclick="window.alert('You do not have a valid password')" /></form>
- confirmación: se usa cuando se necesita obtener una respuesta sí o no del usuario. Este tipo de diálogo se muestra con un mensaje y los botones» Aceptar «y» Cancelar». El método confirm () toma el mensaje que se mostrará al usuario como argumento y devuelve verdadero o falso dependiendo de si el usuario presionó «Aceptar» o «Cancelar»:
<script language="JavaScript" type="text/javascript">function showConfirmation(){ var result = confirm("Would you like to continue?"); if (result) document.write("Continue"); else document.write("Do not continue");}</script><form action="null"> <input type="button" value="Show Confirmation" onclick="showConfirmation()" /></form>
- prompt – diseñado para permitir que se obtenga información del usuario. El diálogo consta de un mensaje para el usuario, un campo de entrada de texto para la entrada de datos y los botones ACEPTAR y Cancelar. El método prompt() toma el mensaje que se mostrará como argumento y devuelve el valor introducido por el usuario:
<script language="JavaScript" type="text/javascript">function showPrompt(){ var userInput = prompt("Please enter your name:"); document.write("Hello, " + userInput);}</script><form action="null"> <input type="button" value="Show Prompt" onclick="showPrompt()" /></form>
| Previous | Table of Contents | Next |
| JavaScript Math Object | JavaScript Document Object |