Jaka jest różnica między oknem, ekranem i dokumentem w JavaScript?

244

Widzę te terminy używane zamiennie jako globalne środowisko dla DOM. Jaka jest różnica (jeśli istnieje) i kiedy powinienem z nich korzystać?

javascript TimeEmit
źródło

Odpowiedzi:

250

Windowjest głównym katalogiem obiektowym JavaScript, czyli global objectw przeglądarce, może być również traktowany jako katalog główny modelu obiektowego dokumentu. Możesz uzyskać do niego dostęp jakowindow

window.screenlub po prostu screenjest małym obiektem informacyjnym o fizycznych wymiarach ekranu.

window.documentlub po prostu documentjest głównym obiektem potencjalnie widocznego (lub jeszcze lepiej: renderowanego) modelu obiektowego dokumentu / DOM.

Ponieważ windowjest to obiekt globalny, możesz odwoływać się do dowolnych jego właściwości za pomocą samej nazwy właściwości - więc nie musisz zapisywać window.- zostanie to określone przez środowisko wykonawcze.

Peter Aron Zentai
źródło
46
Dokument może być większy niż okno - okno jest „widoczną” częścią przeglądarki.
Mandy,
1
@Mandy element HTML, jeśli nie jest częścią dokumentu, nie jest widoczny. możesz tworzyć ramki iframe, których okna nie są całkowicie widoczne, dopóki nie dodasz ramki iframe do dokumentu
Peter Aron Zentai
27
Komentarz @Mandy myli się windowz rzutnią . A windowjest obiektem JavaScript dla karty przeglądarki lub <iframe>(lub przestarzałym <frame>). Wziernika jest prostokąt świadczonych documentwidać na karcie lub ramki.
Bennett Brown
2
Window.document lub dokument jest taki sam przez cały czas?
BOZ,
2
ponieważ okno jest obiektem globalnym - do każdej jego właściwości / metody można uzyskać dostęp bez faktycznego zapisywania [window.], dzięki czemu window.document można zapisać tylko jako dokument, i oczywiście wskazuje na to samo - jak sama właściwość to to samo, o którym właśnie wspomniano na wiele sposobów.
Peter Aron Zentai
102

Cóż, okno jest pierwszą rzeczą, która zostaje załadowana do przeglądarki. Ten obiekt okna ma większość właściwości, takich jak długość, wewnętrzna szerokość, wewnętrzna wysokość, nazwa, jeśli został zamknięty, jego rodzice i inne.

Co zatem z obiektem dokumentu? Obiektem dokumentu jest twój html, aspx, php lub inny dokument, który zostanie załadowany do przeglądarki. Dokument faktycznie ładuje się do obiektu okna i ma dostępne właściwości, takie jak tytuł, adres URL, plik cookie itp. Co to tak naprawdę oznacza? Oznacza to, że jeśli chcesz uzyskać dostęp do właściwości okna, jest to window.property, jeśli jest to dokument, to window.document.property, który jest również dostępny w skrócie jako document.property.

dom

To wydaje się dość proste. Ale co się stanie po wprowadzeniu IFRAME?

iframe

Arlan T.
źródło
14
Wprowadzające w błąd dla kogoś, kto próbuje nauczyć się podstaw: „Obiektem dokumentu jest twój dokument HTML, aspx, php lub inny dokument, który zostanie załadowany do przeglądarki”. Przeglądarka renderuje HTML i CSS i wykonuje JavaScript. Pliki z językami po stronie serwera, takimi jak PHP, nie są widoczne w przeglądarce.
Bennett Brown
To jest naprawdę pomocne wyjaśnienie, a po nim obrazek dla lepszego zrozumienia ...
Faris Rayhan
49

W skrócie, bardziej szczegółowo poniżej,

  • window to kontekst wykonania i obiekt globalny dla JavaScript tego kontekstu
  • document zawiera DOM, zainicjowany przez parsowanie HTML
  • screen opisuje pełny ekran wyświetlacza fizycznego

Zobacz W3C i odniesienia Mozilli, aby uzyskać szczegółowe informacje na temat tych obiektów. Najbardziej podstawową relacją między tymi trzema jest to, że każda karta przeglądarki ma swoją własną window, a także windowma window.documenti window.screenwłaściwości. Przeglądarka Tab windowjest kontekst globalny, więc documenti screenodnoszą się do window.documenta window.screen. Więcej szczegółów na temat tych trzech obiektów znajduje się poniżej, zgodnie z JavaScriptem Flanagana: Przewodnik definitywny .

window

Każda karta przeglądarki ma własny obiekt najwyższego poziomu window. Każdy <iframe>(i nieaktualny <frame>) element ma również swój własny windowobiekt, zagnieżdżony w oknie nadrzędnym. Każde z tych okien otrzymuje własny osobny obiekt globalny. window.windowodnosi się zawsze window, ale window.parenti window.topmoże odnosić się do zamykania okien, co daje dostęp do innych kontekstów wykonania. Oprócz documenti screenopisanych poniżej windowwłaściwości obejmują

  • setTimeout()i setInterval()powiązanie procedur obsługi zdarzeń z zegarem
  • location podając bieżący adres URL
  • historymetodami back()i forward()historią zmienną karty
  • navigator opisujący oprogramowanie przeglądarki

document

Każdy windowobiekt ma documentobiekt do renderowania. Obiekty te są częściowo mylone, ponieważ elementy HTML są dodawane do obiektu globalnego po przypisaniu unikalnego identyfikatora. Na przykład we fragmencie HTML

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

do elementu akapitu można odwoływać się w dowolny z następujących sposobów:

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

screen

windowObiekt posiada także screenobiekt z właściwościami opisującymi wyświetlacz fizycznej:

  • właściwości ekranu widthi heightto pełny ekran

  • właściwości ekranu availWidthi availHeightpomiń pasek narzędzi

Część ekranu wyświetlającego renderowany dokument jest rzutnia w JavaScript, który jest potencjalnie mylące, ponieważ nazywamy część danej aplikacji na ekranie okno, gdy mówimy o interakcji z systemem operacyjnym. getBoundingClientRect()Sposób według dowolnego documentelementu powróci obiekt o top, left, bottom, i rightwłaściwości opisujące położenie elementu w widoku.

Bennett Brown
źródło
istnieje równoważna instrukcja window.onloadkorzystania z obiektu dokumentu?
FilipeCanatto
@FilipeCanatto patrz stackoverflow.com/questions/588040/…
Bennett Brown
48

Jest windowto rzeczywisty obiekt globalny.

Jest screento ekran, zawiera właściwości dotyczące wyświetlania użytkownika.

Tam documentjest DOM.

Niet the Dark Absol
źródło
11
documentmoże również być window.document, screenmoże być window.screeni windowmoże być window.window(lub window.window.window) :-P
Rocket Hazmat
6
@PeterAronZentai: To dlatego, że windowjest zmienną globalną, co czyni ją własnością windowobiektu globalnego . :-)
Rakieta Hazmat
1
Chcę otworzyć nową stronę przez ajax, chcę zastąpić całą bieżącą stronę nową. Czy powinienem użyć $ (dokument) .load (strona); lub $ (okno) .load (strona); ?
Martin AJ
11

windowzawiera wszystko, więc można zadzwonić window.screeni window.documentuzyskać te elementy. Sprawdź to skrzypce, ładnie drukując zawartość każdego obiektu: http://jsfiddle.net/JKirchartz/82rZu/

Możesz również zobaczyć zawartość obiektu w narzędziach firebug / dev, takich jak:

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

windowjest źródłem wszystkiego, screenma tylko wymiary ekranu i documentjest najwyższym obiektem DOM. więc możesz myśleć o tym windowjak o super document...

JKirchartz
źródło
1

Okno jest pierwszą rzeczą, która zostaje załadowana do przeglądarki. Ten obiekt okna ma większość właściwości, takich jak długość, wewnętrzna szerokość, wewnętrzna wysokość, nazwa, jeśli został zamknięty, jego rodzice i inne.

Obiektem dokumentu jest twój html, aspx, php lub inny dokument, który zostanie załadowany do przeglądarki. Dokument faktycznie ładuje się do obiektu okna i ma dostępne właściwości, takie jak tytuł, adres URL, plik cookie itp. Co to tak naprawdę oznacza? Oznacza to, że jeśli chcesz uzyskać dostęp do właściwości okna, jest to window.property, jeśli jest to dokument, to window.document.property, który jest również dostępny w skrócie jako document.property.

Manjunath Raddi
źródło