Das JavaScript -Fensterobjekt verstehen

Das globale Objekt und das Browserfenster: Ein tiefes Eintauchen in das Fensterobjekt von JavaScript

window Jede JavaScript -Umgebung bietet ein globales Objekt. Variablen, die im globalen Umfang deklariert sind, werden zu Eigenschaften dieses Objekts und Funktionen werden zu ihren Methoden. In einem Browser ist dieses globale Objekt das window -Objekt, das das Browserfenster darstellt, das die Webseite anzeigt. In diesem Artikel wird die Schlüsselanwendung des

-Objekts untersucht.

Schlüsselkonzepte:

• window Das Objekt
ist das globale Objekt des Browsers. Globale Variablen sind ihre Eigenschaften; Globale Funktionen sind seine Methoden.
• window Das Browser -Objektmodell (BOM) ist eine Sammlung von
Objekteigenschaften und Methoden, die Browser- und Bildschirminformationen bereitstellen (Browsertyp, Bildschirmabmessungen, besuchte Seiten usw.).
• window Das Objekt alert() bietet Methoden zum Erstellen und Verwalten von Dialogfeldern (confirm(), prompt(),
). Diese Ausführung bis zur Benutzerinteraktion.
• window Das Objekt
bietet Eigenschaften und Methoden zum Zugriff auf Browserinformationen, dem Navigieren des Verlaufs und zur Steuerung von Windows (Öffnen, Größe, Schließen).
• window Jedes document Objekt enthält ein
Objekt zum Manipulieren der Seite der Seite.

Das Browser -Objektmodell (BOM)

window Die BOM, die über das über das window -Objekt zugänglich ist, enthält Informationen zum Browser und Bildschirm. Obwohl sie nicht offiziell standardisiert sind, werden viele Eigenschaften und Methoden in den wichtigsten Browsern konsequent unterstützt. Jedes Browserfenster, die Registerkarte, das Popup, das Rahmen und das Iframe haben ein eigenes

-Objekt.

boms browserspezifischer Natur:

window Denken Sie daran, JavaScript wird in verschiedenen Umgebungen ausgeführt. Die BOM ist nur innerhalb eines Browserkontexts relevant. Anderen Umgebungen (wie node.js) fehlt ein global -Objekt, besitzen aber dennoch ein globales Objekt (z. B. this in node.js). Um auf das globale Objekt unabhängig von der Umgebung zuzugreifen, verwenden Sie das Schlüsselwort

im globalen Bereich:

const globalObject = this;

Globale Variablen und das Fensterobjekt:

const globale Variablen (ohne let, var oder window deklariert) sind Eigenschaften des globalen Objekts. In Browsern bedeutet dies, dass sie Eigenschaften des

Objekts sind:

x = 6;          // Global variable
window.x === x; // true

window. Zugriff auf globale Variablen direkt (ohne window), was die Code -Portabilität verbessert. Der Zugriff auf sie über

ist jedoch nützlich, um zu überprüfen, ob eine Variable definiert ist: <🎜>

const globalObject = this;

Funktionen wie parseInt() und isNaN() sind globale Objektmethoden (und damit window Methoden in Browsern). Wenn Sie sie direkt anrufen (ohne window.), ist dies eine Standardpraxis.

Dialogfelder (alert(), confirm(), prompt()):

Diese Funktionen erstellen Dialogfelder und pausieren aus der Ausführung, bis der Benutzer interagiert. Verwenden Sie sie mit Bedacht, da sie den Programmfluss stören können:

• window.alert('Message'): Zeigt ein Meldungsfeld an. Gibt undefined zurück.
• window.confirm('Question?'): Zeigt ein Bestätigungsdialog an (OK/Abbrechen). Gibt true (OK) oder false (Abbrechen) zurück.
• window.prompt('Prompt', 'Default'): Zeigt eine Eingabeaufforderung mit einem Eingangsfeld an. Gibt den Eingabtext (OK) oder null (Abbrechen) zurück.

Browserinformationen (Navigator -Objekt):

Das Objekt window.navigator bietet Browserinformationen. Die Eigenschaft userAgent gibt eine Zeichenfolge zurück, die den Browser und den Betriebssystem beschreibt. Diese Informationen sind jedoch unzuverlässig und können geändert werden.

URL -Details (window.location):

Das Objekt window.location enthält URL -Informationen:

• href: Vollständige URL (lesen/schreiben)
• protocol: Protokoll (z. B. https:)
• host: Domain und Port
• hostname: Domain
• port: Portnummer
• pathname: Pfad
• search: Abfrage String
• hash: Fragment -Identifier
• origin: Protokoll und Domäne (schreibgeschützt)

location bietet auch Methoden wie reload(), assign() und replace() zum Navigieren.

Browser -Geschichte (window.history):

Das Objekt window.history bietet Zugriff auf zuvor besuchte Seiten. length gibt die Anzahl der besuchten Seiten an. go(n), forward() und back() durch die Geschichte navigieren.

Fenstersteuerung (window.open(), close(), moveTo(), resizeTo()):

Diese Methoden steuern Fenster:

• window.open(url, title, attributes): Öffnet ein neues Fenster.
• window.close(): Schließt ein Fenster.
• window.moveTo(x, y): Bewegt ein Fenster.
• window.resizeTo(width, height): Die Größe eines Fensters.

Verwenden Sie diese mit Vorsicht; Viele Browser beschränken ihre Verwendung aufgrund von Missbrauch in der Vergangenheit (Pop-up-Anzeigen).

Bildschirminformationen (window.screen):

Das Objekt window.screen enthält Bildschirminformationen:

• height, width: Bildschirmabmessungen.
• availHeight, availWidth: Nutzbare Bildschirmdimensionen (ohne Menüs).
• colorDepth: Farbbit -Tiefe.

Das Dokumentobjekt:

Jedes window Objekt enthält ein document -Objekt zum Manipulieren des Inhalts der Seite (an anderer Stelle ausführlich behandelt). Die document.write() -Methode schreibt Text auf die Seite und überschreibt den vorhandenen Inhalt, wenn die Seite bereits geladen ist. Seine Verwendung ist im Allgemeinen entmutigt.

FAQs:

• Was ist das window Objekt? Das globale Objekt in einer Browserumgebung.
• Wie kann ich direkt oder mit dem Schlüsselwort darauf zugreifen. window
• Gemeinsame Eigenschaften? , document, location, innerWidth. innerHeight
• ? Ereignis ausgelöst, wenn die Seite vollständig geladen wird. window.onload
Erkennen blockierter Pop-ups?
• Überprüfen Sie den Rückgabewert von . window.open()
Mit diesem umfassenden Überblick sollten Sie das

-Ovascript -Objekt und seine zugehörigen Funktionen effektiv nutzen. Denken Sie daran, diese leistungsstarken Tools verantwortungsbewusst zu verwenden und die Benutzererfahrung zu berücksichtigen.

Das obige ist der detaillierte Inhalt vonDas JavaScript -Fensterobjekt verstehen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!