Fenêtre JavaScript - Modèle objet du navigateur

Modèle objet du navigateur (BOM)

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

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 fenêtre

Lorsque le navigateur ouvre un document, il crée un objet fenêtre, c'est-à-dire que l'objet fenêtre représente la fenêtre ouverte dans le navigateur.

L'objet window est un objet global, et les propriétés de la fenêtre peuvent être utilisées comme variables globales. Par exemple, vous pouvez simplement écrire un document au lieu de window.document. De même, vous pouvez utiliser les méthodes de l'objet window actuel comme fonctions, par exemple simplement écrire alert() au lieu de Window.alert().

Si le document contient des cadres, le navigateur crée un objet fenêtre pour le document et un objet fenêtre supplémentaire pour chaque cadre.

Conseil : bien qu'il n'existe pas de norme claire pour l'objet window, tous les navigateurs le prennent en charge.

Le document du HTML DOM est aussi un des attributs de l'objet window :

window.document.getElementById("header");

Identique à ceci :

document.getElementById("header");

Taille de la fenêtre

Là Il existe trois méthodes pour déterminer la taille de la fenêtre du navigateur (la fenêtre d'affichage du navigateur, à l'exclusion des barres d'outils et des 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

document.body.clientHeight

document.body.clientWidth

Solution JavaScript pratique (couvre tous les navigateurs) :

<!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>

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.resizeTo() - Ajuster la taille de la fenêtre actuelle

Formation continue

nouveau fichier

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> <script type="text/javascript"> myWindow=window.open('','','width=200,height=100') myWindow.document.write("This is 'myWindow'") myWindow.moveTo(0,0) </script> </head> <body> <p>把新窗口移动到指定屏幕左上角（屏幕左上角为 0,0 坐标，往右和下计算为正）</p> </body> </html>

soumettre Réinitialiser le code

Opération automatique

Fenêtre JavaScript - Modèle objet du navigateur

ÉlémentaireTutoriel de site Web d'imitation d'entreprise Imperial CMS

ÉlémentaireLes débutants sans aucune base dans WordPress créent des blogs personnels et des sites Web d'entreprise

ÉlémentaireVidéo d'instructions sur la création de sites Web à base zéro Ultimate CMS

ÉlémentaireProjet front-end-Shangyou [Pratique complète de la technologie HTML/CSS/JS]

IntermédiaireVue3.0 de 0 pour créer une pratique de projet de système de gestion backend universel

ÉlémentaireCours frontal base zéro [Vue apprentissage avancé et application pratique]

ÉlémentaireTutoriel WEB front-end [HTML5+CSS3+JS]

ÉlémentaireIntroduction rapide à apipost

IntermédiaireTutoriel pratique Vue3+TypeScript au niveau de l'entreprise

ÉlémentaireParlons brièvement de la création d'une entreprise en PHP

IntermédiaireProjet de commerce électronique VUE (combat réel de projet double front-end et back-end)

ÉlémentaireApplication pratique Apipost [api, interface, tests automatisés, mock]