Événement de chargement de fenêtre :
des événements de compatibilité pour ajuster la taille de la fenêtre :
window La méthode .open() peut être utilisée pour naviguer vers une URL spécifiée ou pour ouvrir une nouvelle fenêtre de navigateur.
window.open("http://www.wrox.com/", "wroxWindow","height=400,width=400,top=10,left=10,resizable=yes");timer:
window.scroll(x, y)
window.scrollTo(x, y) : Les deux sont la même utilisation pour changer la position de l'horizontale et barres de défilement verticales, à condition qu'il y en ait La barre de défilement est sur la page
window.scrollBy(x, y) : Le défilement cumulé de la barre de défilement, les nombres positifs descendent, les nombres négatifs montent window.scrollBy(0, 10) : Lorsqu'elle est appelée toutes les 100 millisecondes, la barre de défilement se déplace de 10 pixels
window.getComputedStyle (elem, pseudo-class)
boîte de dialogue
exécute le script js et place le code js dans la pile d'exécution dans un mode d'exécution synchrone. Lors de l'exécution de la pile d'exécution, il rencontre du code asynchrone JS (événements, minuteurs, ajax, chargement de ressources). , erreur) est placé dans les API Web (file d'attente des tâches). Lorsque le code dans la pile d'exécution est terminé, accédez à la file d'attente des tâches et prenez la première pour l'exécution. Après l'exécution, récupérez-en une dans la file d'attente des tâches et exécutez-la, et exécutez-le à plusieurs reprises (boucle d'événement) jusqu'à ce que l'exécution dans la file d'attente des tâches soit terminée.
window.history est utilisé pour obtenir l'adresse URL de la page actuelle et rediriger le navigateur vers une nouvelle page.
http://www.itcast.cn:80/index.html?name=andy&age=1#link http : protocole de communication www.itcast.cn : nom de domaine 80 : port index.html : path?name=andy&age=1 : paramètre #link fragment : point d'ancrage,
attribut de l'objet lien :
méthode objet de protocole de l'URL actuelle :
navigator : un objet qui encapsule les informations de configuration du navigateur
window.history l'objet inclut la collection d'historique (url) du navigateur
window.screen l'objet contient des informations sur l'utilisateur 
// screen : Obtenez la taille de résolution du périphérique d'affichage // Pleine résolution : screen.widht/height // Comment identifier le type de client compatible avec toutes les largeurs de client // Grand écran, moyen écran, petit écran, ultra petit écran // lg md sm xs // TV pc pad téléphone //Largeur >= 1200 >=992 >= 768 < 768 //La résolution restante après la suppression de la barre des tâches // screen.availHeight/availWidth
peut obtenir dynamiquement la position (offset), la taille, etc. de l'élément
Attributs couramment utilisés de la série offset :
des attributs communs
tels que la taille de la bordure et la taille des éléments
:obtient dynamiquement la taille et la distance de défilement des éléments.
Attributs communs
barre de défilement unitaire Lors du défilement, l'événement onscroll sera déclenché.
window.pageXOffset/pageYOffset IE8 et inférieurs ne sont pas compatibles avec document.body/documentElement.scrollLeft/scrollTop La compatibilité est déroutante et prend beaucoup de temps. Ajoutez deux valeurs, car c'est impossible. pour que deux valeurs aient des valeurs en même temps .Méthode de compatibilité d'encapsulation, trouver la distance de roulement de la roue de la barre de défilement getScrollOffet()
/*
Encapsule une méthode pour obtenir la distance de défilement de la barre de défilement Renvoie : x : la distance de défilement de la barre de défilement horizontale y : la distance de défilement de la barre de défilement verticale */function getScrollOffet(){
si(window.pageXOffset){
return {//{} de l'objet doit être après le mot-clé, sinon le système l'ajoutera automatiquement et la valeur de retour ne sera pas définie ;
x : window.pageXOffset,
y : window.pageYOffset }
}else{//Compatible avec IE8 et versions antérieures return {
x : document.body.scrollLeft + document.documentElement.scrollLeft,
y : document.body.scrollTop + document.documentElement.scrollTop }
}} window.innerWidth/innerHeight n'est pas compatible avec IE8 et versions antérieures (remarque : la largeur et la hauteur ici n'incluent pas la hauteur de la barre de menus, de la barre d'outils, de la barre de défilement, etc.) document.documentElement.clientWidth/clientHeight en mode standard, n'importe quel navigateur est compatible avec document.body.clientWidth/clientHeight Il s'agit d'une méthode de compatibilité d'encapsulation du navigateur adaptée aux situations étranges. Renvoie la taille de la fenêtre du navigateur. getViewportOffset()
/*Encapsulation renvoie la valeur de retour de la taille de la fenêtre du navigateur. :
w : largeur de la fenêtre h : hauteur de la fenêtre*/function getViewportOffset(){
si(window.innerWidth){
retour {
w : window.innerWidth,
h : window.innerHeight }
}else{ //Compatible avec les navigateurs IE8 et inférieurs if(document.compatMode == 'BackCompat'){
//Retour { en mode de rendu bizarre
w : document.body.clientWidth,
h : document.body.clientHeight }
}autre{
//Retour en mode standard {
w : document.documentElement.clientWidth,
h : document.documentElement.clientHeight }
}
}}console.log(document.compatMode); // Mode bizarre BackCompat // Mode standard CSS1Compat domElement.getBoundingClientRect() renvoie un objet qui contient left ; , Les attributs tels que top, right et bottom. Left et top représentent les coordonnées X et Y du coin supérieur gauche de l'élément. Right et bottom représentent les coordonnées X et Y du coin inférieur droit de l'élément. les attributs width ne sont pas implémentés dans les anciennes versions d'IE. Les résultats renvoyés ne sont pas en temps réel '
// Obtenez la position de l'élément dans la fonction du document getElementPosition(target){.
//Prise en charge de la méthode BoundingClientRect() if(0 && target.getBoundingClientRect){
var pos = target.getBoundingClientRect();
return { // Lorsque la barre de défilement bouge, ajoutez la position x de la barre de défilement : pos.left + Math.max(document.body.scrollLeft, document.documentElement.scrollLeft),
y : pos.top + Math.max(document.body.scrollTop, document.documentElement.scrollTop)
}
} autre {
var pos = {
gauche : 0,
haut : 0
}
var _elm = cible ;
while(target.offsetParent){
if(_elm == target){//Accumulez à gauche et en haut pour la première fois
pos.left += target.offsetLeft;
pos.top += target.offsetTop;
}autre{
pos.left += target.offsetLeft + target.clientLeft;
pos.top += target.offsetTop + target.clientTop ;
}
// la cible réaffecte target = target.offsetParent;
}
return { x : pos.gauche, y : pos.top}
}} Barre d'état
position de la fenêtre
d'affichage de l'état du navigateuret d'autres attributs