Fenêtre JavaScript


Le modèle objet du navigateur (BOM) donne à JavaScript la possibilité de « parler » avec le navigateur.

Modèle d'objet de navigateur (BOM)

Modèle d'objet de navigateur (Browser ObjectM odel ( BOM)), il n’existe pas de norme formelle.

Les méthodes et propriétés sont souvent considérées comme des nomenclatures puisque les navigateurs modernes ont implémenté (presque) les mêmes méthodes et propriétés pour l'interactivité JavaScript.

Objet Window

Tous les navigateurs prennent en charge l'objet window. Il représente la fenêtre du navigateur.

Tous les objets globaux, fonctions et variables JavaScript deviennent automatiquement membres de l'objet fenêtre.

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 document HTML DOM est l'une des propriétés de l'objet window :

window.document.getElementById("header");

Identique à ceci :

document.getElementById("header");

Taille de la fenêtre

Il existe trois façons de déterminer la taille de la fenêtre du navigateur (la fenêtre d'affichage du navigateur, pas y compris les barres d'outils et les barres de défilement).

Pour Internet Explorer, Chrome, Firefox, Opera et Safari :

  • window.innerHeight - la hauteur intérieure de la fenêtre du navigateur

  • window.innerWidth - La largeur intérieure de la fenêtre du navigateur

Pour Internet Explorer 8, 7, 6, 5 :

  • document .documentElement .clientHeight

  • document.documentElement.clientWidth

ou

  • document.body. clientHeight

  • document.body.clientWidth

Solution JavaScript pratique (couvrant tous les navigateurs) :

Exemple

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>

<p id="demo"></p>
<script>
var w=window.innerWidth
|| document.documentElement.clientWidth
|| document.body.clientWidth;
var h=window.innerHeight
|| document.documentElement.clientHeight
|| document.body.clientHeight;
x=document.getElementById("demo");
x.innerHTML="浏览器window宽度: " + w + ", 高度: " + h + "。"
</script>

</body>
</html>

Exécuter l'instance»

Cliquez sur le bouton "Exécuter l'instance" pour afficher l'instance en ligne

Cet exemple montre la hauteur de la fenêtre du navigateur et de sa largeur : (hors barres d'outils/barres de défilement)

Autres méthodes Window

Quelques autres méthodes :

  • window.open ( ) - Ouvrir une nouvelle fenêtre

  • window.close() - Fermer la fenêtre actuelle

  • window.moveTo() - Déplacer la fenêtre actuelle window

  • window.resizeTo() - Redimensionne la fenêtre actuelle