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

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.

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

Veja mais em: http://eligeske.com/jquery/what-is-the-difference-between-document-and-window-objects-2/#sthash.CwLGOk9c.dpuf

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

Veja mais em: http://eligeske.com/jquery/what-is-the-difference-between-document-and-window-objects-2/#sthash.CVkTMIL7.dpuf

— Manjunath Raddi
fonte

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

window

document

screen

`window`

`document`

`screen`