Was ist der Unterschied zwischen Fenster, Bildschirm und Dokument in Javascript?

243

Ich sehe diese Begriffe synonym als globale Umgebung für das DOM. Was ist der Unterschied (wenn es einen gibt) und wann sollte ich jeden verwenden?

javascript TimeEmit
quelle

Antworten:

248

Windowist der Hauptstamm des JavaScript-Objekts, auch bekannt als der global objectin einem Browser, kann auch als Stamm des Dokumentobjektmodells behandelt werden. Sie können darauf zugreifen alswindow

window.screenoder ist nur screenein kleines Informationsobjekt über physische Bildschirmabmessungen.

window.documentoder ist nur documentdas Hauptobjekt des potenziell sichtbaren (oder noch besser: gerenderten) Dokumentobjektmodells / DOM.

Da windowes sich um das globale Objekt handelt, können Sie auf alle Eigenschaften nur mit dem Eigenschaftsnamen verweisen, sodass Sie nicht aufschreiben window.müssen. Dies wird von der Laufzeit herausgefunden.

Peter Aron Zentai
quelle
46
Ein Dokument kann größer als ein Fenster sein - das Fenster ist der "sichtbare" Teil in Ihrem Browser.
Mandy
1
@Mandy Ein HTML-Element, wenn es nicht Teil des Dokuments ist, ist nicht sichtbar. Sie können Iframes erstellen, deren Fenster erst sichtbar werden, wenn Sie den Iframe an das Dokument anhängen
Peter Aron Zentai
27
Der Kommentar von @Mandy verwechselt windowmit dem Ansichtsfenster . A windowist das JavaScript-Objekt für die Registerkarte Browser oder <iframe>(oder veraltet <frame>). Das Ansichtsfenster ist das Rechteck des gerenderten documentFensters innerhalb der Registerkarte oder des Rahmens.
Bennett Brown
2
window.document oder document ist immer gleich?
BOZ
2
Da window das globale Objekt ist, kann auf jede Eigenschaft / Methode zugegriffen werden, ohne [window.] tatsächlich aufzuschreiben, sodass window.document als reines Dokument geschrieben werden kann und natürlich auf dasselbe verweist - wie die Eigenschaft selbst ist das gleiche, auf das nur auf mehrere Arten verwiesen wird.
Peter Aron Zentai
101

Nun, das Fenster ist das erste, was in den Browser geladen wird. Dieses Fensterobjekt hat die meisten Eigenschaften wie Länge, innere Breite, innere Höhe, Name, wenn es geschlossen wurde, seine Eltern und mehr.

Was ist dann mit dem Dokumentobjekt? Das Dokumentobjekt ist Ihr HTML-, Aspx-, PHP- oder anderes Dokument, das in den Browser geladen wird. Das Dokument wird tatsächlich in das Fensterobjekt geladen und verfügt über Eigenschaften wie Titel, URL, Cookie usw. Was bedeutet das wirklich? Das heißt, wenn Sie auf eine Eigenschaft für das Fenster zugreifen möchten, handelt es sich um window.property. Wenn es sich um document handelt, handelt es sich um window.document.property, das auch kurz als document.property verfügbar ist.

dom

Das scheint einfach genug. Aber was passiert, wenn ein IFRAME eingeführt wird?

iframe

Arlan T.
quelle
14
Irreführend für jemanden, der versucht, die Grundlagen zu erlernen: "Das Dokumentobjekt ist Ihr HTML-, Aspx-, PHP- oder anderes Dokument, das in den Browser geladen wird." Der Browser rendert HTML und CSS und führt JavaScript aus. Dateien mit serverseitigen Sprachen wie PHP werden vom Browser nicht angezeigt.
Bennett Brown
Dies ist eine wirklich hilfreiche Erklärung, gefolgt von einem Bild zum besseren Verständnis.
Faris Rayhan
49

Kurz, mit mehr Details unten,

  • window ist der Ausführungskontext und das globale Objekt für das JavaScript dieses Kontexts
  • document enthält das DOM, das durch Parsen von HTML initialisiert wurde
  • screen beschreibt den Vollbildmodus der physischen Anzeige

Weitere Informationen zu diesen Objekten finden Sie in den W3C- und Mozilla- Referenzen. Die grundlegendste Beziehung zwischen den drei ist, dass jede Browser-Registerkarte ihre eigene windowhat und eine windowhat window.documentund window.screenEigenschaften. Der Browser Registerkarte windowist der globale Kontext, so documentund screenbeziehen sich auf window.documentund window.screen. Weitere Details zu den drei Objekten finden Sie unten in Flanagans JavaScript: Definitive Guide .

window

Jede Browser-Registerkarte verfügt über ein eigenes windowObjekt der obersten Ebene . Jedes <iframe>(und veraltete <frame>) Element hat auch ein eigenes windowObjekt, das in einem übergeordneten Fenster verschachtelt ist. Jedes dieser Fenster erhält ein eigenes globales Objekt. window.windowbezieht sich immer auf window, aber window.parentund window.topFenster zu umschließen beziehen könnte, den Zugang zu anderen Ausführungskontexten zu geben. Zusätzlich zu documentund screennachstehend beschrieben windowumfassen Eigenschaften

  • setTimeout()und setInterval()Binden von Ereignishandlern an einen Timer
  • location Geben Sie die aktuelle URL an
  • historymit Methoden back()und forward()Angabe des veränderlichen Verlaufs der Registerkarte
  • navigator Beschreibung der Browsersoftware

document

Jedes windowObjekt hat ein documentObjekt, das gerendert werden soll. Diese Objekte werden teilweise verwirrt, weil dem globalen Objekt HTML-Elemente hinzugefügt werden, wenn eine eindeutige ID zugewiesen wird. ZB im HTML-Snippet

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

Auf das Absatzelement kann wie folgt verwiesen werden:

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

screen

Das windowObjekt verfügt auch über ein screenObjekt mit Eigenschaften, die die physische Anzeige beschreiben:

  • Bildschirmeigenschaften widthund heightsind der Vollbild

  • Bildschirmeigenschaften availWidthund availHeightlassen Sie die Symbolleiste weg

Der Teil eines Bildschirms, auf dem das gerenderte Dokument angezeigt wird, ist das Ansichtsfenster in JavaScript. Dies ist möglicherweise verwirrend, da wir den Teil des Bildschirms einer Anwendung als Fenster bezeichnen, wenn wir über Interaktionen mit dem Betriebssystem sprechen. Das getBoundingClientRect()Verfahren nach documentElemente wird ein Objekt zurückgeben mit top, left, bottom, und rightEigenschaften , um die Position des Elements in dem Darstellungsfeld beschreiben.

Bennett Brown
quelle
Es gibt eine äquivalente Anweisung zur window.onloadVerwendung von Dokumentobjekten.
FilipeCanatto
@FilipeCanatto siehe stackoverflow.com/questions/588040/…
Bennett Brown
48

Das window ist das eigentliche globale Objekt.

Das screen ist der Bildschirm, der Eigenschaften zur Anzeige des Benutzers enthält.

Hier documentbefindet sich das DOM.

Niet the Dark Absol
quelle
11
documentkann auch sein window.document, screenkann sein window.screenund windowkann sein window.window(oder window.window.window) :-P
Rocket Hazmat
6
@PeterAronZentai: Das liegt daran, dass windowes sich um eine globale Variable handelt, die sie zu einer Eigenschaft des globalen windowObjekts macht. :-)
Rocket Hazmat
1
Ich muss eine neue Seite von Ajax öffnen, ich möchte die gesamte aktuelle Seite durch eine neue ersetzen. Sollte ich entweder $ (document) .load (page) verwenden; oder $ (Fenster) .load (Seite); ?
Martin AJ
11

Das windowenthält alles, so dass Sie diese Elemente aufrufen window.screenund abrufen können window.document. Schauen Sie sich diese Geige an und drucken Sie den Inhalt jedes Objekts hübsch aus: http://jsfiddle.net/JKirchartz/82rZu/

Sie können den Inhalt des Objekts auch in folgenden Firebug / Dev-Tools anzeigen:

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

window ist die Wurzel von allem, screen nur Bildschirmabmessungen und documentist das oberste DOM-Objekt. so kann man daran denken , wie windowwie ein super- zu sein document...

JKirchartz
quelle
1

Das Fenster wird als erstes in den Browser geladen. Dieses Fensterobjekt hat die meisten Eigenschaften wie Länge, innere Breite, innere Höhe, Name, wenn es geschlossen wurde, seine Eltern und mehr.

Das Dokumentobjekt ist Ihr HTML-, Aspx-, PHP- oder anderes Dokument, das in den Browser geladen wird. Das Dokument wird tatsächlich in das Fensterobjekt geladen und verfügt über Eigenschaften wie Titel, URL, Cookie usw. Was bedeutet das wirklich? Das heißt, wenn Sie auf eine Eigenschaft für das Fenster zugreifen möchten, handelt es sich um window.property. Wenn es sich um document handelt, handelt es sich um window.document.property, das auch kurz als document.property verfügbar ist.

Manjunath Raddi
quelle