¿Cuál es la diferencia entre ventana, pantalla y documento en Javascript?

244

Veo estos términos usados ​​indistintamente como el entorno global para el DOM. ¿Cuál es la diferencia (si hay una) y cuándo debo usar cada una?

javascript TimeEmit
fuente

Respuestas:

250

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á.

Peter Aron Zentai
fuente
46
Un documento puede ser más grande que una ventana: la ventana es la parte "visible" de su navegador.
Mandy
1
@Mandy un elemento html si no es parte del documento no está visible. puede crear iframes cuyas ventanas no son totalmente visibles hasta que adjunte el iframe al documento
Peter Aron Zentai
27
El comentario de @Mandy confunde 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.
Bennett Brown el
2
¿window.document o document es el mismo todo el tiempo?
BOZ
2
Como la ventana es el objeto global, se puede acceder a cada propiedad / método sin tener que escribir [window.] para que window.document se pueda escribir como un documento y, por supuesto, apunta a lo mismo, como la propiedad misma es lo mismo solo referenciado de múltiples maneras.
Peter Aron Zentai
102

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.

dom

Eso parece bastante simple. Pero, ¿qué sucede una vez que se introduce un IFRAME?

iframe

Arlan T
fuente
14
Engañar a alguien que intenta aprender los conceptos básicos: "El objeto del documento es su html, aspx, php u otro documento que se cargará en el navegador". El navegador procesa HTML y CSS y ejecuta JavaScript. El navegador no ve los archivos con lenguajes del lado del servidor como PHP.
Bennett Brown el
Esta es una explicación realmente útil seguida de una imagen para una mejor comprensión ..
Faris Rayhan
49

Brevemente, con más detalles a continuación,

  • window es el contexto de ejecución y el objeto global para JavaScript de ese contexto
  • document contiene el DOM, inicializado al analizar HTML
  • screen describe 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()y setInterval()vincular controladores de eventos a un temporizador
  • location dando la URL actual
  • historycon métodos back()y forward()dando el historial mutable de la pestaña
  • navigator describiendo 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.holyCow o window["holyCow"]
  • document.getElementById("holyCow")
  • document.body.firstChild
  • document.body.children[0]

screen

El windowobjeto también tiene un screenobjeto con propiedades que describen la pantalla física:

  • propiedades de pantalla widthy heightson la pantalla completa

  • propiedades de pantalla availWidthy availHeightomitir 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.

Bennett Brown
fuente
Hay una instrucción equivalente para window.onloadusar el objeto de documento?
FilipeCanatto
@FilipeCanatto ver stackoverflow.com/questions/588040/…
Bennett Brown
48

El windowes el objeto global real.

La screenes la pantalla, contiene propiedades sobre la visualización del usuario.

El documentes donde está el DOM.

Niet the Dark Absol
fuente
11
documenttambién puede ser window.document, screenpuede ser window.screeny windowpuede ser window.window(o window.window.window) :-P
Rocket Hazmat
66
@PeterAronZentai: Eso es porque windowes una variable global, lo que la convierte en una propiedad del windowobjeto global . :-)
Rocket Hazmat
1
Necesito abrir una nueva página por ajax, quiero reemplazar toda la página actual por una nueva. ¿Debo usar $ (document) .load (página); o $ (ventana) .load (página); ?
Martin AJ
11

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

JKirchartz
fuente
1

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.

Manjunath Raddi
fuente