Modèle d'objet navigateur pour Window JavaScript

Modèle d'objet du navigateur (Browser Object Model (BOM) permet au JavaScript de dialoguer avec le navigateur.

Modèle d'objet du navigateur (Browser Object Model (BOM))

Il n'existe pas de norme officielle pour le modèle d'objet du navigateur (BOM).

Les navigateurs modernes ont (presque) mis en œuvre les mêmes méthodes et propriétés d'interaction JavaScript, donc ils sont souvent mentionnés comme les méthodes et propriétés de BOM.

Objet Window

Tous les navigateurs le supportent window Objet. Il représente la fenêtre du navigateur.

Tous les objets, fonctions et variables JavaScript globaux deviennent automatiquement des membres de l'objet window.

Les variables globales sont des propriétés de l'objet window.

Les fonctions globales sont des méthodes de l'objet window.

Même le objet (HTML DOM) document est une propriété de l'objet window :

window.document.getElementById("header");

Équivalent à :

document.getElementById("header");

Taille de la fenêtre

Ces deux propriétés peuvent être utilisées pour déterminer la taille de la fenêtre du navigateur.

Ces deux propriétés renvoient toutes deux les dimensions en pixels :

  • window.innerHeight - La hauteur interne de la fenêtre du navigateur (en pixels)
  • window.innerWidth - La largeur interne de la fenêtre du navigateur (en pixels)

La fenêtre du navigateur (la fenêtre de visualisation du navigateur) ne comprend pas la barre d'outils et la barre de défilement.

Pour Internet Explorer 8, 7, 6, 5 :

  • document.documentElement.clientHeight
  • document.documentElement.clientWidth

ou

  • document.body.clientHeight
  • document.body.clientWidth

Une solution JavaScript pratique (pour tous les navigateurs) :

Exemple

var w = window.innerWidth
|| document.documentElement.clientWidth
|| document.body.clientWidth;
var h = window.innerHeight
|| document.documentElement.clientHeight
|| document.body.clientHeight;

Essayez-le vous-même

L'exemple montre la hauteur et la largeur de la fenêtre du navigateur (sans barre d'outils et barres de défilement) :

Autres méthodes de fenêtre

D'autres méthodes :

  • window.open() - Ouvrir une nouvelle fenêtre
  • window.close() - Fermer la fenêtre courante
  • window.moveTo() - Déplacer la fenêtre courante
  • window.resizeTo() - Réajuster la fenêtre courante