Qual é a diferença entre janela, tela e documento em Javascript?

243

Eu vejo esses termos usados ​​de forma intercambiável como o ambiente global para o DOM. Qual é a diferença (se houver) e quando devo usar cada um?

javascript TimeEmit
fonte

Respostas:

248

Windowé a principal raiz do objeto JavaScript, também conhecida como global objectem um navegador, também pode ser tratada como a raiz do modelo de objeto do documento. Você pode acessá-lo comowindow

window.screenou apenas screené um pequeno objeto de informação sobre dimensões físicas da tela.

window.documentou apenas documenté o principal objeto do modelo de objeto de documento potencialmente visível (ou melhor ainda: renderizado) / DOM.

Como windowé o objeto global, você pode fazer referência a quaisquer propriedades dele apenas com o nome da propriedade - para que você não precise anotar window.- ele será descoberto pelo tempo de execução.

Peter Aron Zentai
fonte
46
Um documento pode ser maior que uma janela - a janela é a parte "visível" no seu navegador.
Mandy
1
@Mandy um elemento html se ele não fizer parte do documento não estiver visível. você pode criar iframe quem é janelas é totalmente não visível até que você anexar o iframe para o documento
Peter Aron Zentai
27
O comentário de @Mandy confunde windowcom a viewport . A windowé o objeto JavaScript da guia do navegador ou <iframe>(ou descontinuado <frame>). A janela de exibição é o retângulo da renderização documentvista na guia ou quadro.
Bennett Brown
2
window.document ou documento é o mesmo o tempo todo?
BOZ
2
uma vez que window é o objeto global - todas as propriedades / métodos podem ser acessados ​​sem realmente escrever [window.], portanto window.document pode ser escrito apenas como documento e, é claro, aponta para a mesma coisa - como a própria propriedade é o mesmo apenas mencionado de várias maneiras.
Peter Aron Zentai
101

Bem, a janela é a primeira coisa que é carregada no navegador. Esse objeto de janela possui a maioria das propriedades, como length, innerWidth, innerHeight, name, se ele foi fechado, seus pais e muito mais.

E o objeto do documento, então? O objeto do documento é seu html, aspx, php ou outro documento que será carregado no navegador. O documento é carregado dentro do objeto da janela e possui propriedades disponíveis, como título, URL, cookie, etc. O que isso realmente significa? Isso significa que, se você deseja acessar uma propriedade para a janela, é window.property, se é documento, é window.document.property, que também está disponível em breve como document.property.

dom

Isso parece bastante simples. Mas o que acontece depois que um IFRAME é introduzido?

iframe

Arlan T
fonte
14
Enganador para alguém que tenta aprender o básico: "O objeto do documento é seu html, aspx, php ou outro documento que será carregado no navegador". O navegador renderiza HTML e CSS e executa JavaScript. Arquivos com linguagens do lado do servidor, como PHP, não são vistos pelo navegador.
Bennett Brown
Isto é realmente útil explicação seguido por imagem para uma melhor compreensão ..
Faris Rayhan
49

Resumidamente, com mais detalhes abaixo,

  • window é o contexto de execução e o objeto global para o JavaScript desse contexto
  • document contém o DOM, inicializado pela análise de HTML
  • screen descreve a tela cheia da tela física

Consulte as referências do W3C e Mozilla para obter detalhes sobre esses objetos. A relação mais básica entre os três é que cada aba do navegador tem a sua própria window, e uma windowtem window.documente window.screenpropriedades. O navegador guia de windowé o contexto global, de modo documente screenreferem-se a window.documente window.screen. Mais detalhes sobre os três objetos estão abaixo, seguindo o JavaScript de Flanagan: Guia Definitivo .

window

Cada guia do navegador possui seu próprio windowobjeto de nível superior . Cada elemento <iframe>(e descontinuado <frame>) também possui seu próprio windowobjeto, aninhado em uma janela pai. Cada uma dessas janelas obtém seu próprio objeto global separado. window.windowsempre se refere a window, mas window.parente window.toppode se referir a janelas fechadas, dando acesso a outros contextos de execução. Além documente screendescritas abaixo, as windowpropriedades incluem

  • setTimeout()e setInterval()vinculando manipuladores de eventos a um timer
  • location dando o URL atual
  • historycom métodos back()e forward()fornecendo o histórico mutável da guia
  • navigator descrevendo o software do navegador

document

Cada windowobjeto tem um documentobjeto a ser renderizado. Esses objetos ficam confusos em parte porque os elementos HTML são adicionados ao objeto global quando é atribuído um ID exclusivo. Por exemplo, no trecho HTML

<body>
  <p id="holyCow"> This is the first paragraph.</p>
</body>

o elemento de parágrafo pode ser referenciado por qualquer um dos seguintes:

  • window.holyCow ou window["holyCow"]
  • document.getElementById("holyCow")
  • document.body.firstChild
  • document.body.children[0]

screen

O windowobjeto também possui um screenobjeto com propriedades que descrevem a exibição física:

  • propriedades da tela widthe heightsão a tela cheia

  • propriedades da tela availWidthe availHeightomitir a barra de ferramentas

A parte da tela que exibe o documento renderizado é a janela de visualização em JavaScript, que é potencialmente confusa porque chamamos a parte da tela de um aplicativo de janela quando falamos sobre interações com o sistema operacional. O getBoundingClientRect()método de qualquer documentelemento retornará com um objecto top, left, bottom, e rightpropriedades que descrevem a localização do elemento na janela de visualização.

Bennett Brown
fonte
existe uma instrução equivalente ao window.onloaduso do objeto de documento?
FilipeCanatto
@FilipeCanatto consulte stackoverflow.com/questions/588040/…
Bennett Brown
48

O windowé o objeto global real.

A screené a tela, que contém propriedades cerca de exibição do usuário.

A documenté onde o DOM é.

Niet, o Escuro Absol
fonte
11
documenttambém pode ser window.document, screenpode ser window.screen, e windowpode ser window.window(ou window.window.window) :-P
Rocket Hazmat
6
@PeterAronZentai: Isso windowocorre porque é uma variável global, o que a torna uma propriedade do windowobjeto global . :-)
Rocket Hazmat
1
Preciso abrir uma nova página pelo ajax, quero substituir a página atual inteira por uma nova. Devo usar $ (document) .load (página); ou $ (janela) .load (página); ?
Martin AJ
11

o windowcontém tudo, para que você possa chamar window.screene window.documentobter esses elementos. Confira este violino, imprimindo bastante o conteúdo de cada objeto: http://jsfiddle.net/JKirchartz/82rZu/

Você também pode ver o conteúdo do objeto nas ferramentas firebug / dev assim:

console.dir(window);
console.dir(document);
console.dir(screen);

windowé a raiz de tudo, screenapenas possui dimensões de tela e documenté o principal objeto DOM. então você pode pensar nisso windowcomo um super- document...

JKirchartz
fonte
1

A janela é a primeira coisa que é carregada no navegador. Esse objeto de janela possui a maioria das propriedades, como length, innerWidth, innerHeight, name, se ele foi fechado, seus pais e muito mais.

O objeto do documento é seu html, aspx, php ou outro documento que será carregado no navegador. O documento é carregado dentro do objeto da janela e possui propriedades disponíveis, como título, URL, cookie, etc. O que isso realmente significa? Isso significa que, se você deseja acessar uma propriedade para a janela, é window.property, se é documento, é window.document.property, que também está disponível em breve como document.property.

Manjunath Raddi
fonte