Comprendre l'objet de fenêtre JavaScript

L'objet global et la fenêtre du navigateur: une plongée profonde dans l'objet de fenêtre de JavaScript

Chaque environnement JavaScript dispose d'un objet global. Les variables déclarées dans la portée globale deviennent les propriétés de cet objet et les fonctions deviennent ses méthodes. Dans un navigateur, cet objet global est l'objet window, représentant la fenêtre du navigateur affichant la page Web. Cet article explore les utilisations clés de l'objet window.

Concepts clés:

• L'objet window est l'objet global du navigateur. Les variables globales sont ses propriétés; Les fonctions globales sont ses méthodes.
• Le modèle d'objet du navigateur (BOM) est une collection de propriétés et de méthodes d'objet window objet fournissant des informations sur le navigateur et l'écran (type de navigateur, dimensions d'écran, pages visitées, etc.).
• L'objet window propose des méthodes de création et de gestion des boîtes de dialogue (alert(), confirm(), prompt()). Ceux-ci arrêtent l'exécution jusqu'à l'interaction de l'utilisateur.
• L'objet window fournit des propriétés et des méthodes pour accéder aux informations du navigateur, en naviguant sur l'historique et en contrôlant les fenêtres (ouverture, redimensionnement, fermeture).
• chaque objet window contient un objet document pour manipuler le contenu de la page.

Le modèle d'objet du navigateur (BOM)

La nomenclature, accessible via l'objet window, fournit des informations sur le navigateur et l'écran. Bien qu'ils ne soient pas officiellement standardisés, de nombreuses propriétés et méthodes sont systématiquement soutenues entre les principaux navigateurs. Chaque fenêtre de navigateur, onglet, fenêtre contextuelle, cadre et iframe a son propre objet window.

Nature spécifique au navigateur du navigateur:

N'oubliez pas que JavaScript s'exécute dans divers environnements. La nomenclature n'est pertinente que dans un contexte de navigateur. D'autres environnements (comme node.js) n'ont pas un objet window, mais possèdent toujours un objet global (par exemple, global dans node.js). Pour accéder à l'objet global, quel que soit l'environnement, utilisez le mot-clé this dans la portée globale:

<code class="language-javascript">const globalObject = this;</code>

Variables globales et objet de fenêtre:

Les variables globales (déclarées sans const, let, ou var) sont des propriétés de l'objet global. Dans les navigateurs, cela signifie que ce sont des propriétés de l'objet window:

<code class="language-javascript">x = 6;          // Global variable
window.x === x; // true</code>

Généralement, accédez directement aux variables globales (sans window.), en améliorant la portabilité du code. Cependant, l'accès à eux via window est utile pour vérifier si une variable est définie:

<code class="language-javascript">const globalObject = this;</code>

Les fonctions comme parseInt() et isNaN() sont des méthodes d'objets globales (et donc window méthodes dans les navigateurs). Les appeler directement (sans window.) est une pratique standard.

Boîtes de dialogue (alert(), confirm(), prompt()):

Ces fonctions créent des boîtes de dialogue, en pauses l'exécution jusqu'à l'interaction de l'utilisateur. Utilisez-les judicieusement, car ils peuvent perturber le flux du programme:

• window.alert('Message'): Affiche une zone de message. Retourne undefined.
• window.confirm('Question?'): Affiche une boîte de dialogue de confirmation (OK / Annuler). Renvoie true (OK) ou false (Annuler).
• window.prompt('Prompt', 'Default'): Affiche une invite avec un champ de saisie. Renvoie le texte d'entrée (OK) ou null (Annuler).

Informations sur le navigateur (objet Navigator):

L'objet window.navigator fournit des informations sur le navigateur. La propriété userAgent renvoie une chaîne décrivant le navigateur et le système d'exploitation. Cependant, ces informations sont peu fiables et peuvent être modifiées.

Détails de l'URL (window.location):

L'objet window.location contient des informations URL:

• href: URL complète (lecture / écriture)
• protocol: protocole (par exemple, https:)
• host: domaine et port
• hostname: domaine
• port: numéro de port
• pathname: chemin
• search: String de requête
• hash: identifiant de fragment
• origin: protocole et domaine (en lecture seule)

location propose également des méthodes comme reload(), assign() et replace() pour naviguer.

Historique du navigateur (window.history):

L'objet window.history donne accès aux pages précédemment visitées. length donne le nombre de pages visitées. go(n), forward(), et back() naviguer dans l'histoire.

Contrôle des fenêtres (window.open(), close(), moveTo(), resizeTo()):

Ces méthodes contrôlent les fenêtres:

• window.open(url, title, attributes): ouvre une nouvelle fenêtre.
• window.close(): ferme une fenêtre.
• window.moveTo(x, y): déplace une fenêtre.
• window.resizeTo(width, height): redimensionne une fenêtre.

les utiliser avec prudence; De nombreux navigateurs restreignent leur utilisation en raison des abus passés (publicités pop-up).

Informations sur l'écran (window.screen):

L'objet window.screen fournit des informations d'écran:

• height, width: dimensions de l'écran.
• availHeight, availWidth: Dimensions d'écran utilisables (à l'exclusion des menus).
• colorDepth: profondeur du bit de couleur.

L'objet de document:

chaque objet window contient un objet document pour manipuler le contenu de la page (couvert en détail ailleurs). La méthode document.write() écrit du texte sur la page, écrasant le contenu existant si la page est déjà chargée. Son utilisation est généralement découragée.

FAQS:

• quel est l'objet window? L'objet global dans un environnement de navigateur.
• comment y accéder? directement ou en utilisant le mot-clé window.
• Propriétés communes? document, location, innerWidth, innerHeight.
• window.onload? Événement déclenché lorsque la page se charge complètement.
• Détection des fenêtres contextuelles bloquées? Vérifiez la valeur de retour de window.open().

Cette vue d'ensemble complète devrait vous équiper pour utiliser efficacement l'objet window de JavaScript et ses fonctionnalités associées. N'oubliez pas d'utiliser ces outils puissants de manière responsable et de considérer l'expérience utilisateur.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!