ECMAScript es el núcleo de JavaScript, pero cuando se usa JavaScript en la web, entonces BOM (modelo de objeto de navegador) es el núcleo real.
El objeto central de BOM es la ventana, que representa una instancia del navegador.
En el navegador, el objeto de la ventana es una interfaz para JavaScript para acceder a la ventana del navegador y un objeto global especificado por ECMAScript. Es decir, cualquier variable, objeto y función definida en una página web toma la ventana como su objeto global.
1. Alcance global
Dado que los objetos de la ventana juegan el papel de los objetos globales, todos los objetos, variables y funciones declaradas en el alcance global se convertirán en propiedades y métodos de ventanas.
Todavía hay una diferencia entre definir variables globales y definir atributos en los objetos de la ventana: las variables globales no se pueden eliminar a través de la eliminación, mientras que los atributos definidos en los objetos de la ventana están bien.
VAR Age = 28; window.color = "rojo"; // En IE <9, se lanza un error y se devuelve False Eliminar la ventana. Se devuelve en otros navegadores; // En IE <9, se lanza un error y la verdadera ventana de eliminación. Color se devuelve en otros navegadores; // devolver alerta verdadera (window.age); // 28 alerta (window.color); //indefinido
Al agregar atributos de la ventana usando las declaraciones VAR, hay una propiedad llamada [[Configurable]]. El valor de esta propiedad se establece en falso, por lo que los atributos definidos de esta manera no pueden ser eliminados por Delete.
Se lanzará un error al intentar acceder a una variable no declarada, pero al consultar el objeto de la ventana, puede saber si existe una posible variable no declarada.
// El error se lanza aquí porque OldValue no declara var newValue = OldValue; // El error no se lanza aquí porque esta es una consulta de propiedad var newValue = Window.oldValue // Alert (NewValue); //indefinido
De hecho, muchos objetos globales de JavaScript, como la localización y la navegación, son en realidad propiedades de los objetos de la ventana.
2. Relación y marco de la ventana
Si la página contiene marcos, cada cuadro tiene su propio objeto de ventana y se guarda en la colección de marcos.
En una colección de cuadros, se puede acceder a través de un índice numérico o nombre de cuadro.
<html> <fead> <title> frameset ejemplo </title> </head> <frameset rows = "160,*"> <frame src = "frame.htm" name = "topframe"> <frameset cols = "50%, 50%"> <src = "otro" name.htm "nam. name = "Rightframe"> </Frameset> </ Frameset> </html>
Para este ejemplo, el marco anterior se puede hacer referencia por Window.frames [0] o Window.frames ["Topframe"]. Sin embargo, es mejor usar Top.frames [0] para acceder al marco.
El objeto superior siempre apunta al marco de la capa más alto (externo), es decir, la ventana del navegador. Usarlo asegura que se acceda correctamente a otro cuadro en un cuadro.
Otro objeto de ventana opuesto al objeto superior es el padre, el objeto principal siempre apunta al marco superior directo del marco actual.
También hay un objeto propio , que siempre apunta a la ventana. De hecho, el yo y la ventana se pueden usar entre sí. El propósito de la introducción de objetos propios es solo corresponder a los objetos superiores y principales.
Todos estos objetos son propiedades de la ventana y se pueden usar con Window.Parent o Window.top.
3. Ubicación de la ventana
La mayoría de los navegadores proporcionan Screenleft y Screentop, que se utilizan para representar la posición de la ventana en relación con el lado izquierdo y superior de la pantalla, respectivamente. FF proporciona la misma información de ventana en las propiedades de Screenx y Screeny, y la cantidad de Safari Chorme también admite estas dos propiedades al mismo tiempo.
Use el siguiente código para obtener las posiciones izquierda y superior de la ventana a través del navegador.
var LeftPos = (typeof window.screenleft == "número")? window.screenleft: window.screenx; var toppos = (typeof window.screentop == "número")? window.screentop: window.screeny;
Vale la pena señalar que en IE y Opera, Screenleft y Screentop guarden la distancia desde el lado izquierdo y superior de la pantalla hasta el área visible de la página representada por el objeto de la ventana. En Chrome, FF y Safari, Screens y Screentop, guarde los valores de coordenadas de todo el navegador en la pantalla.
El resultado final es que los valores exactos de coordenadas en el lado izquierdo y superior de la ventana no se pueden obtener en condiciones de navegador cruzado.
Usando métodos Moveto () y MoveBy (), la ventana se puede mover con precisión a la nueva posición. Ambos métodos reciben dos parámetros. Moveto () recibe las coordenadas del eje x e y, y MoveBy () recibe los píxeles en movimiento.
// Mueve la pantalla a la parte superior izquierda Moveto (0,0); // mover la ventana dejada por 50px MoveBy (-50,0);
Sin embargo, estos dos métodos pueden ser deshabilitados por el navegador. Estos dos métodos solo son aplicables al objeto de ventana más externa y no son aplicables a los marcos.
4. Tamaño de la ventana
Los navegadores convencionales proporcionan 4 propiedades para determinar el tamaño de la ventana: ancho interno, interior, ancho exterior y externas.
En IE9+, Safari y FF, Outerwidth y Outerhight devuelven el tamaño de la ventana del navegador en sí (independientemente del acceso desde qué marco), pero en Opera, los valores de estas dos propiedades representan el tamaño del contenedor de vista de página (el tamaño de una sola ventana de pestaña). Innerwidth y Innerhight representan el tamaño de la vista de página en el contenedor (menos el ancho de la frontera). Pero en Chrome, estas 4 propiedades representan el tamaño de la ventana de la ventana gráfica en lugar del tamaño del navegador.
IE9 no proporcionó los atributos para obtener el tamaño de la ventana del navegador antes; Sin embargo, proporciona información sobre el área visual de la página a través del DOM.
En IE, FF, Chrome, Opera y Safari, la información de la vista de la página se almacena en document.documentelement.clientwidth y document.documentelement.clienthight. En IE6, debe ser efectivo en modo estándar. Si se trata de un modo promiscuo, se debe obtener la misma información a través de document.body.clientwidth y document.body.clienthight. Chrome no distingue entre el modo estándar o el modo mixto.
Aunque el tamaño de la ventana del navegador en sí no se puede determinar al final, se puede obtener el tamaño de la vista de la página.
var pageWidth = window.innerWidth, pageHeight = window.innerHeight; if (typeof pageWidth! = "número") {if (document.compatMode == "css1compat") {pageWidth = document.documentelement.clientWidth; PageHeight = document.documentelement.clientHeight; } else {pageWidth = document.body.clientWidth; PageHeight = document.body.clientHeight; }} alerta ("ancho:" + pageWidth); alerta ("Altura:" + PageHeight);Para dispositivos móviles, ventana. Innerwidth y Window.innerhight Mantenga la vista visible, que es el tamaño del área de página en la pantalla. Los navegadores de IE móviles deben obtener la misma información a través de document.documentelement.clientwidth y document.documentelement.clienthight.
Los métodos resizeto () y resize () se pueden usar para ajustar el tamaño de la ventana del navegador. Ambos métodos reciben dos parámetros. resizeto () recibe el nuevo ancho y la nueva altura de la ventana del navegador, y resizeBy () recibe la diferencia de ancho y la diferencia de altura entre la nueva ventana y la ventana anterior.
// ajustar a 100*100 resizeto (100,100); // ajustar a 200*150 MoveBy (100,50);
Sin embargo, estos dos métodos pueden ser deshabilitados por el navegador. Estos dos métodos solo son aplicables al objeto de ventana más externa y no son aplicables a los marcos.
5. Navegue y abra Windows
El método Window.open () puede abrir una URL específica o una nueva ventana del navegador. Este método recibe 4 parámetros: URL, objetivo de ventana, una cadena de características y un valor booleano que indica si la nueva página reemplaza la página actual.
surgir
Varios parámetros
Entre ellos, sí/no también se pueden usar 1/0; Pixelvalue es un valor específico, píxeles de unidad.
Parámetros | Rango de valores | Descripción
siempre bajado | SÍ/NO | Especifique que las ventanas están ocultas detrás de todas las ventanas
AlwaysReed | SÍ/NO | Especifique Windows suspendidos en todas las ventanas
dependiendo | sí/no | si la ventana principal está cerrada al mismo tiempo
Directorios | SÍ/NO | ¿Las columnas de directorio de Nav2 y 3 son visibles?
Altura | Pixelvalue | Altura de la ventana
Pases de acceso caliente | SÍ/NO | Establezca la tecla de acceso rápido de salida seguro en la ventana sin barra de menú
Innerheight | Pixelvalue | Altura de píxel del documento en la ventana
Innerwidth | Pixelvalue | PixelWidth of Document in Window
Ubicación | SÍ/NO | ¿Es visible la barra de ubicación?
Menubar | Sí/No | ¿La barra de menú es visible?
OUTERHEight | Pixelvalue | Establezca la altura del píxel de la ventana (incluidas las bordes decorativos)
Outerwidth | Pixelvalue | Establece el ancho de píxeles de la ventana (incluidos los bordes decorativos)
RESIZABLE | SÍ/NO | ¿El tamaño de la ventana es ajustable?
Screenx | Pixelvalue | Pixelle Longitud de la ventana al borde izquierdo de la pantalla
Screeny | Pixelvalue | Pixelle Longitud de la ventana al límite superior de la pantalla
barras de desplazamiento | sí/no | Si hay una barra de desplazamiento en la ventana
TitleBar | SÍ/NO | ¿Es visible la columna de título de la ventana?
Barra de herramientas | SÍ/NO | ¿La barra de herramientas de la ventana es visible?
Ancho | Pixelvalue | Window Pixel Ancho
z-aspecto | sí/no | Si la ventana flota en otras ventanas después de que se active
Ejemplo:
Window.open ('Page.html', 'NewWindow', 'Height = 100, Width = 400, Top = 0, Left = 0, Barra de herramientas = no, Menubar = no, Scrollbars = no, Resizable = No, Ubicación = no, estado = no')Después de ejecutar el script, Page.html se abrirá en el nuevo formulario NewWindow, con un ancho de 100, altura de 400, 0 píxeles desde la parte superior de la pantalla, a 0 píxeles de la izquierda de la pantalla, sin barra de herramientas, sin barra de menú, sin barra de desplazamiento, sin dimensionamiento, sin barra de dirección y sin barra de estado.
6. Llamadas intermitentes y llamadas de tiempo de espera
JavaScript es un lenguaje único, pero permite la ejecución del código de programación en un momento específico estableciendo el valor de tiempo de espera y el tiempo de intervalo. El primero ejecuta el código después del tiempo especificado, mientras que el segundo se llama una vez por cada tiempo especificado.
Tiempo de espera de llamada setTimeOut ()
El método SetTimeOut () acepta dos parámetros, el primer parámetro es una función, y el segundo parámetro es el tiempo (unidades de microsegundos), que devuelve la ID numérica.
setTimeOut (function () {alert ("¡Hola!");}, 1000);Después de llamar a SetTimeOut (), el método devolverá una ID numérica, indicando la llamada de tiempo de espera, y la llamada de tiempo de espera puede cancelarse.
var timeOutId = setTimeOut (function () {alert ("¡Hola!");}, 1000); ClearTimeOut (TimeOutId);Llamada intermitente setInterval ()
El método setInterval () acepta dos parámetros, el primer parámetro es una función, el segundo parámetro es el tiempo (microsegundos de la unidad) y devuelve la ID numérica
setInterval (function () {alert ("¡Hola!");}, 1000);Cancele la llamada a ClearInterval () y acepte una ID de llamada intermitente de parámetro
var intervalid = nulo; var span = document.createElement ("span"); // Crear nodo SPAN span.id = "Time"; // Establecer el ID de SPAN Docum.Body.AppendChild (SPAN); // agregar función de span incrementNumber () {var ahora = new Date (); var timestr = ahora.tolocaletiMeString (); span.inntext = timestr; num ++; if (num == 10) {ClearInterval (Intervalid); // El tiempo permanece sin cambios después de diez segundos}} intervalid = setInterval (incrementNumber, 1000);Intente usar llamadas de tiempo de espera en lugar de llamadas intermitentes
var num = 0; var max = 10; función incrementNumber () {num ++; if (num <max) {setTimeout (incrementNumber, 1000); } else {alerta ("ok"); }} setTimeOut (incrementNumber, 1000);7. Cuadro de diálogo del sistema
ALERTA DE CAJA DE ADVERTENCIA ()
alerta ("¡Bienvenido!");El cuadro de información confirma () tiene un botón de cancelación
if (confirmar ("¿estás de acuerdo?")) {alerta ("de acuerdo"); } else {alerta ("en desacuerdo"); }Indica (), solicitando al usuario que ingrese algún texto
Var result = solic ("¿Respetas tu apellido?", ""); if (resultado! == null) {alerta ("bienvenido", +resultado); }La explicación detallada anterior del BOM (objeto de ventana) en JavaScript es todo el contenido compartido por el editor. Espero que pueda darle una referencia y espero que pueda apoyar más a Wulin.com.