¿Cuál es la diferencia entre ventana, pantalla y documento en Javascript?
Respuestas:
Windowes la raíz principal del objeto JavaScript, también conocida como la global objectde un navegador, también puede tratarse como la raíz del modelo de objeto del documento. Puedes acceder a él comowindow
window.screen o solo screen es un pequeño objeto de información sobre las dimensiones físicas de la pantalla.
window.document o solo document es el objeto principal del modelo de objeto de documento / DOM potencialmente visible (o mejor aún: renderizado).
Dado que windowes el objeto global, puede hacer referencia a cualquier propiedad con solo el nombre de la propiedad, por lo que no tiene que anotarlo, window.el tiempo de ejecución lo resolverá.
windowcon viewport . A windowes el objeto de JavaScript para la pestaña del navegador o <iframe>(o en desuso <frame>). La ventana gráfica es el rectángulo del renderizado documentvisto dentro de la pestaña o marco.
Bueno, la ventana es lo primero que se carga en el navegador. Este objeto de ventana tiene la mayoría de las propiedades como longitud, innerWidth, innerHeight, nombre, si se ha cerrado, sus padres y más.
¿Qué pasa con el objeto del documento entonces? El objeto del documento es su html, aspx, php u otro documento que se cargará en el navegador. El documento en realidad se carga dentro del objeto de la ventana y tiene propiedades disponibles como título, URL, cookie, etc. ¿Qué significa esto realmente? Eso significa que si desea acceder a una propiedad para la ventana, es window.property, si es un documento, es window.document.property, que también está disponible en resumen como document.property.
Eso parece bastante simple. Pero, ¿qué sucede una vez que se introduce un IFRAME?
Brevemente, con más detalles a continuación,
windowes el contexto de ejecución y el objeto global para JavaScript de ese contextodocumentcontiene el DOM, inicializado al analizar HTMLscreendescribe la pantalla completa de la pantalla física
Consulte las referencias de W3C y Mozilla para obtener detalles sobre estos objetos. La relación más básica entre los tres es que cada pestaña del navegador tiene la suya propia window, y windowtiene propiedades window.documenty window.screenpropiedades. La pestaña del navegador windowes el contexto global, de modo documenty screense refieren a window.documente window.screen. A continuación encontrará más detalles sobre los tres objetos, siguiendo el JavaScript de Flanagan: Guía definitiva .
window
Cada pestaña del navegador tiene su propio windowobjeto de nivel superior . Cada elemento <iframe>(y en desuso <frame>) también tiene su propio windowobjeto, anidado dentro de una ventana principal. Cada una de estas ventanas obtiene su propio objeto global separado. window.windowsiempre se refiere a window, pero window.parenty window.toppodría referirse a encerrar ventanas, que da acceso a otros contextos de ejecución. Además de documenty se screendescribe a continuación, las windowpropiedades incluyen
setTimeout()ysetInterval()vincular controladores de eventos a un temporizadorlocationdando la URL actualhistorycon métodosback()yforward()dando el historial mutable de la pestañanavigatordescribiendo el software del navegador
document
Cada windowobjeto tiene un documentobjeto para ser renderizado. Estos objetos se confunden en parte porque los elementos HTML se agregan al objeto global cuando se les asigna una identificación única. Por ejemplo, en el fragmento de HTML
<body>
<p id="holyCow"> This is the first paragraph.</p>
</body>El elemento de párrafo puede ser referenciado por cualquiera de los siguientes:
window.holyCowowindow["holyCow"]document.getElementById("holyCow")document.body.firstChilddocument.body.children[0]
screen
El windowobjeto también tiene un screenobjeto con propiedades que describen la pantalla física:
propiedades de pantalla
widthyheightson la pantalla completapropiedades de pantalla
availWidthyavailHeightomitir la barra de herramientas
La parte de una pantalla que muestra el documento representado es la ventana gráfica en JavaScript, lo cual es potencialmente confuso porque llamamos a la parte de la pantalla de una aplicación una ventana cuando hablamos de interacciones con el sistema operativo. El getBoundingClientRect()método de cualquier documentelemento devolverá un objeto con top, left, bottom, y rightlas propiedades que describen la localización del elemento en la ventana gráfica.
window.onloadusar el objeto de documento?
El windowes el objeto global real.
La screenes la pantalla, contiene propiedades sobre la visualización del usuario.
El documentes donde está el DOM.
documenttambién puede ser window.document, screenpuede ser window.screeny windowpuede ser window.window(o window.window.window) :-P
windowes una variable global, lo que la convierte en una propiedad del windowobjeto global . :-)
la windowcontiene todo, para que pueda llamar window.screeny window.documentpara conseguir esos elementos. Echa un vistazo a este violín, imprimiendo los contenidos de cada objeto: http://jsfiddle.net/JKirchartz/82rZu/
También puede ver el contenido del objeto en herramientas firebug / dev como esta:
console.dir(window);
console.dir(document);
console.dir(screen);windowes la raíz de todo, screensolo tiene dimensiones de pantalla y documentes el principal objeto DOM. así que puedes pensar que windowes como un súper document...
La ventana es lo primero que se carga en el navegador. Este objeto de ventana tiene la mayoría de las propiedades como longitud, innerWidth, innerHeight, nombre, si se ha cerrado, sus padres y más.
El objeto del documento es su html, aspx, php u otro documento que se cargará en el navegador. El documento en realidad se carga dentro del objeto de la ventana y tiene propiedades disponibles como título, URL, cookie, etc. ¿Qué significa esto realmente? Eso significa que si desea acceder a una propiedad para la ventana, es window.property, si es un documento, es window.document.property, que también está disponible en resumen como document.property.