Lors du développement d’interfaces pour sites Web, vous devez souvent utiliser JavaScript. Bien sûr, c'est mauvais, mais dans certaines situations, il est tout simplement impossible de tout implémenter complètement en CSS.

Le besoin le plus courant que j'ai est de déterminer la largeur ou la hauteur de la fenêtre du navigateur pour une manipulation ultérieure. Sous la coupe se trouvent toutes les informations sur ce sujet.

Où cela peut-il être utile ?

Je ne parlerai pas pour tout le monde, mais cela m'est utile pour intégrer à Textpattern toutes sortes de galeries, sliders, etc., où tout est écrit en JS pur. Les choses strictement liées à JS sont rares, mais elles surviennent, c'est pourquoi cette note est apparue.

Vous pouvez le définir de 2 manières : JS ou jQuery.

Déterminer la largeur ou la hauteur à l'aide de JS pur

Il s’agit de la méthode la plus privilégiée, car presque tous les navigateurs modernes disposent d’un moteur JavaScript. Même les navigateurs mobiles ont appris à travailler avec JS.

Bien sûr, il est possible que l'utilisateur lui-même désactive le traitement JS dans le navigateur, mais il me semble qu'il n'y a pas beaucoup de "personnes étranges", car presque tous les sites utilisent une sorte de solution fonctionnant sur JS.

En JS, pour déterminer les tailles d'écran, vous devez utiliser les fonctions :

Screen.width //Largeur de l'écran screen.height //Hauteur de l'écran

Voici un exemple d'utilisation inutile :

alerte(écran.largeur+"x"+écran.hauteur);

Si vous l'utilisez pour positionner certains éléments sur la page, la meilleure solution serait d'utiliser les dimensions de la fenêtre du navigateur plutôt que les tailles d'écran. En JS, cela se fait comme ceci :

Document.body.clientWidth //Largeur du navigateur document.body.clientHeight //Hauteur du navigateur

En conséquence, voici un exemple d’utilisation dénué de sens :

alert(document.body.clientWidth+"x"+document.body.clientHeight);

Dimensionnement du navigateur avec jQuery

Personnellement, j'utilise la méthode décrite ci-dessous. Cette méthode ne fonctionne que si vous avez préalablement installé la bibliothèque jQuery sur votre site. Sur tous les sites que je dois créer, cette bibliothèque est un standard de facto.

Pour utiliser jQuery pour notre tâche, nous devons utiliser le code :

$(fenêtre).width(); //Largeur du navigateur $(window).height(); //Hauteur du navigateur

Et au final, je voudrais dire que s'il est possible de se passer de JS et jQuery en général ou partiellement, alors c'est exactement ce qu'il faut faire.

Partager sur les réseaux sociaux réseaux

Dans cette leçon, nous examinerons les propriétés de l'objet window, avec lequel vous pouvez obtenir les dimensions de la zone de travail de la fenêtre du navigateur (innerWidth et innerHeight), les dimensions de la fenêtre elle-même (outerWidth et externalHeight), son emplacement par rapport au coin supérieur gauche de l'écran de l'utilisateur (screenLeft et screenTop) et les positions de défilement (pageXOffset et pageYOffset).

Propriétés innerWidth et innerHeight

Ils sont conçus pour obtenir les dimensions de la zone de travail visible de la fenêtre du navigateur. Ceux. Les propriétés innerWidth et innerHeight sont destinées à obtenir la largeur et la hauteur de la zone dans laquelle le document HTML est affiché. Ces propriétés sont en lecture seule et renvoient des valeurs de pixels.

Par exemple, obtenez la hauteur et la largeur de la zone de travail visible de la fenêtre du navigateur :

Largeur de la zone de visualisation visible (widthContenArea) :

Largeur de la zone de visualisation visible (heightContenArea) :

// largeur de la fenêtre visible (pour tous les navigateurs sauf Internet Explorer 8) var widthContenArea = window.innerWidth; // hauteur de la fenêtre visible (pour tous les navigateurs sauf Internet Explorer 8) var heightContenArea = window.innerHeight; // largeur de la fenêtre visible (pour Internet Explorer 8) widthContenArea = document.documentElement.clientWidth || document.body.clientWidth; // hauteur de la fenêtre visible (pour Internet Explorer 8) heightContenArea = document.documentElement.clientHeight || document.body.clientHeight; // largeur de la fenêtre visible (pour tous les navigateurs) widthContenArea1 = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth; // hauteur de la fenêtre visible (pour tous les navigateurs) heightContenArea1 = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight; document.getElementById("widthContenArea").innerHTML = widthContenArea; document.getElementById("heightContenArea").innerHTML = heightContenArea;

Propriétés externalWidth et externalHeight

Ils sont conçus pour obtenir les dimensions de la fenêtre entière du navigateur, c'est-à-dire y compris les barres d'outils, les barres de défilement, la barre d'état, les bordures de fenêtres, etc. Les propriétés externalWidth et externalHeight sont en lecture seule et renvoient respectivement la largeur et la hauteur de la fenêtre en pixels.

Par exemple, obtenez la hauteur et la largeur de la fenêtre du navigateur :

Largeur de la fenêtre du navigateur (widthWindow) :

Hauteur de la fenêtre du navigateur (heighWindow) :

// largeur de la fenêtre du navigateur var widthWindow = window.outerWidth; // hauteur de la fenêtre du navigateur var heightWindow = window.outerHeight; document.getElementById("widthWindow").innerHTML = widthWindow; document.getElementById("heightWindow").innerHTML = heightWindow;

Propriétés screenLeft (screenX) et screenTop (screenY)

Ils sont conçus pour obtenir les coordonnées du coin supérieur gauche de la fenêtre du navigateur ou du document par rapport au coin supérieur gauche de l'écran de l'utilisateur.

Dans ce cas, les propriétés screenLeft et screenTop fonctionnent dans Internet Explorer et les propriétés screenX et screenY fonctionnent dans Mozilia Firefox. Dans Chrome, Safari et d'autres navigateurs similaires, vous pouvez utiliser à la fois les propriétés screenLeft et screenTop, ainsi que les propriétés screenX et screenY.

Lorsque vous utilisez ces propriétés, vous devez prendre en compte le fait que certains navigateurs peuvent renvoyer les coordonnées du coin supérieur gauche du document, et que certains navigateurs peuvent renvoyer les coordonnées du coin supérieur gauche de la fenêtre. Les propriétés screenleft (screenX) et screenTop (screenY) sont en lecture seule et renvoient respectivement les distances horizontales et verticales par rapport au coin gauche de l'écran.

Par exemple, affichons sous forme de message les coordonnées x et y du coin gauche de la fenêtre actuelle du navigateur (document) par rapport au coin supérieur gauche de l'écran :

function windowXY() ( // En utilisant les propriétés screenleft et screenTop, nous obtenons les coordonnées de l'emplacement de la fenêtre (document) var winX = window.screenLeft; var winY = window.screenTop; // En utilisant les propriétés screenX et screenY, nous obtenons les coordonnées de l'emplacement de la fenêtre (du document) winX = window.screenX; winY = window.screenY; // Récupère les coordonnées de l'emplacement de la fenêtre (du document) dans tous les navigateurs winX = window.screenX ? window.screenX: window.screenLeft; winY = window.screenY ? window.screenY: window.screenTop ; window.alert ("Coordonnées de la fenêtre par rapport à l'écran de l'utilisateur : X = " + winX + ", Y = " + winY + "."); ) Connaître le coordonnées

propriétés pageXOffset (scrollX) et pageYOffset (scrollX)

Ils sont conçus pour obtenir le nombre de pixels par lesquels le document a défilé dans le sens horizontal (pageXOffset) ou vertical (pageYOffset) par rapport au coin supérieur gauche de la fenêtre. Les propriétés scrollX et scrollY sont respectivement équivalentes aux propriétés pageXOffset et pageYOffset. Ces propriétés sont en lecture seule.

Par exemple, affichez dans un message le nombre de pixels selon lequel le document a défilé dans le sens horizontal (pageXOffset) et vertical (pageYOffset).

function scrollContent() ( //Faites défiler le document actuel de 200 pixels vers la droite et vers le bas window.scrollBy(200,200); //Obtenez les valeurs à l'aide des propriétés pageXOffset et pageYOffset var winOffsetX = window.pageXOffset; var winOffsetY = window.pageYOffset ; //Obtenir les valeurs par lesquelles le document a défilé horizontalement ou verticalement pour Internet Explorer : winOffsetX = document.documentElement.scrollLeft; winOffsetY = document.documentElement.scrollTop; //Pour tous les navigateurs : winOffsetX = window.pageXOffset || document .documentElement.scrollLeft; winOffsetY = window.pageYOffset || document.documentElement.scrollTop; alert ("Nombre de pixels par lesquels le document a défilé horizontalement et verticalement : X = " + winOffsetX + ", Y = " + winOffsetY + ". "); ) Connaître les positions des barres de défilement

À quoi ça sert? Par exemple, nous avons une belle mise en page de site Web, qui ne montre toute sa beauté qu'à une résolution de, disons, 1 600 x 1 200. Par exemple, elle a un très grand et bel en-tête. Que se passe-t-il si une personne visite le site avec une résolution de 1024 x 768 ? Oui, seul le chapeau sera visible. Pas bon? Peut-être. Alors pourquoi ne pas faire une chose telle que, étant donné la hauteur du navigateur/écran, l'en-tête serait simplement coupé, et le menu et le reste du site disparaîtraient ? Wow, juste ce dont tu as besoin.

En fait, j'ai décrit l'un des exemples que j'ai rencontrés dans la pratique (voir photo). J'ai résolu le problème simplement – ​​via javascript. Ou peut-être via jQuery, je ne m'en souviens pas. Je vais décrire les deux méthodes ici.

Tout d'abord, il est nécessaire de faire la distinction entre les définitions de « résolution d'écran » et de « taille de la fenêtre du navigateur » (puisque dans certains articles il y a eu des incidents - ils ont critiqué certaines méthodes, en ont proposé d'autres, bien que dans un cas ils aient mesuré la résolution du navigateur, dans l'autre - la résolution du moniteur).

Vous devez déterminer dès le début ce qui est le plus important pour vous. Dans le cas de cet exemple avec l'en-tête, j'ai été guidé par la résolution de l'écran (du moniteur) : après tout, le site est beau, si la fenêtre du navigateur est réduite manuellement, laissez-les étendre leur navigateur en plein écran lors de la visualisation de ceci site (ils n'ont rien à faire, vous savez - Note de l'éditeur). Mais, par exemple, pour ajuster l'image développée de la galerie jQuery Lightbox, j'ai utilisé la largeur et la hauteur du navigateur.

Et après avoir choisi, nous écrivons le code, peut-être dans l'en-tête du site. Tout d'abord un exemple axé sur la résolution de l'écran.

Les lignes 3 à 6 sont purement javascript, les lignes 7 à 11 sont un exemple dans jQuery. Pour déterminer la largeur et la hauteur, les méthodes javascript screen.width et screen.height sont utilisées. Ce que font les lignes est clair : le premier script spécifie le chemin d'accès à un fichier CSS supplémentaire, et le deuxième script définit la propriété CSS « ​​background-position » pour le bloc avec l'identifiant total.

Regardons le deuxième exemple, mais qui portera sur la résolution du navigateur. Tout est pareil, les méthodes ont changé.

Alors, à partir de deux exemples, un bref aperçu de ce qu'il faut utiliser pour quoi :

largeur.écran. Définit la largeur de l'écran (moniteur).

écran.hauteur Détermine la hauteur de l'écran (moniteur).

document.body.clientWidth . Définit la largeur du navigateur.

document.body.clientHeight . Définit la hauteur du navigateur.

$(window).width() . Définit la largeur du navigateur, mais uniquement si jQuery est présent.

$(window).hauteur() . Définit la hauteur du navigateur, mais uniquement si jQuery est présent.

Il est clair que si vous utilisez jQuery, alors l'option 5 est préférable à 3 et 6 à 4 - elles sont simplement plus courtes. Eh bien, cela dépend du goût et de la couleur.

Quant aux entrées spécifiques pour la hauteur et la largeur de l'écran pour jQuery, pour être honnête, je ne les connais pas. En théorie, il devrait y avoir une structure comme 5-6 lignes, mais d'une manière ou d'une autre, je ne l'ai pas rencontrée dans la pratique, il me semble qu'elles n'existent pas. Et ce n’est pas nécessaire, screen.width est une construction assez courte, c’est suffisant.

Oui, il existe également $(document).width() - détermine la largeur du document HTML. L'utilisation dans la pratique est en quelque sorte douteuse. Qui sait, je serai heureux si vous partagez.

C'est tout pour aujourd'hui! Tenons bon jusqu'au week-end et allons en masse aux barbecues ! (sauf si vous êtes malade de quelque chose, comme certains – ndlr). Bonne chance!

Bonjour! Poursuivant le sujet de cette leçon, nous examinerons la question du défilement d'une page Web et de la manipulation de la taille des navigateurs. Comment trouver la largeur du navigateur ? Comment faire défiler une page Web en utilisant JavaScript ? Je pense que vous trouverez les réponses à ces questions dans cette leçon.

Largeur/hauteur de la partie visible de la fenêtre du navigateur Les propriétés clientWidth/Height d'un élément sont exactement la largeur/hauteur de la zone visible de la fenêtre.


Pas window.innerWidth/Height

Il convient de noter que tous les navigateurs, à l'exception d'IE8, peuvent également prendre en charge les propriétés window.innerWidth/innerHeight. Ils enregistrent la taille actuelle de la fenêtre.

Quelle est la différence? Tu demandes. C’est certes petit, mais extrêmement important.

Les propriétés clientWidth/Height, s'il y a une barre de défilement, renverront exactement la largeur/hauteur à l'intérieur, disponible pour l'ensemble du document, et window.innerWidth/Height ignorera sa présence.

Si le côté droit de la page est occupé par une barre de défilement, alors ces lignes afficheront différentes choses :

Alerte (window.innerWidth); // toute la largeur de la fenêtre alert(document.documentElement.clientWidth); // largeur moins défilement

Habituellement, nous ne nous intéressons qu'à la largeur disponible de la fenêtre, par exemple pour dessiner quelque chose, c'est-à-dire sans la barre de défilement. Par conséquent, documentElement.clientWidth est souvent utilisé.

Largeur/hauteur d'une page web en tenant compte du défilement

Oui, théoriquement, la partie visible de la page est documentElement.clientWidth/Height, mais la taille complète, y compris la barre de défilement, est, par analogie, documentElement.scrollWidth/scrollHeight.

Cela est vrai pour tous les éléments réguliers.

Mais pour une page avec ces propriétés, un problème peut survenir lorsque le défilement est présent ou non. Dans ce cas, ils ne fonctionnent pas correctement. Il faut dire que dans les navigateurs Chrome/Safari et Opera, s'il n'y a pas de barre de défilement, la valeur de documentElement.scrollHeight dans ce cas peut être encore inférieure à celle de documentElement.clientHeight, ce qui, bien sûr, ressemble à quelque chose d'illogique.

Ce problème peut se produire spécifiquement pour documentElement.

Mais vous pouvez déterminer de manière fiable la taille de la page en tenant compte du défilement en prenant simplement le maximum de ces plusieurs propriétés :

Var scrollVisota = Math.max(document.body.scrollVisota, document.documentElement.scrollHeight, document.body.offsetVisota, document.documentElement.offsetHeight, document.body.clientVisota, document.documentElement.clientHeight); alert("Hauteur incluant le défilement : " + scrollVisota);

Obtenir le parchemin actuel

Si un élément normal a un scroll actuel, vous pouvez l'obtenir dans scrollLeft/scrollTop.

Alors qu'en est-il de la page ?

Le fait est que la plupart des navigateurs traiteront correctement une requête adressée à documentElement.scrollLeft/Top, mais Safari/Chrome/Opera présente des bogues qui vous obligent à utiliser document.body.

Eh bien, pour contourner complètement ce problème, vous pouvez utiliser les propriétés window.pageXOffset/pageYOffset :

Alert("Défilement actuel en haut : " + window.pageYOffset); alert("Défilement gauche actuel : " + window.pageXOffset);

Ce sont toutes des propriétés :

• Non pris en charge IE8-
• Ils peuvent uniquement être lus et ne peuvent pas être modifiés.

Si IE8 n'a pas d'importance, nous utilisons simplement ces propriétés.

Une option cross-navigateur prenant en compte IE8 propose une option sur documentElement :

Var scrollTop = window.pageYOffset || document.documentElement.scrollTop; alert("Défilement actuel : " + scrollTop);

Modification du défilement des pages : scrollTo, scrollBy, scrollIntoView

Pour faire défiler une page à l'aide de JavaScript, tous ses éléments doivent être entièrement chargés.

Sur les éléments normaux, scrollTop/scrollLeft peut, en principe, être modifié et l'élément défilera.

Personne ne vous empêche de faire de même avec la page. Dans tous les navigateurs à l'exception de Chrome/Safari/Opera, vous pouvez faire défiler en définissant simplement document.documentElement.scrollTop, et dans ces navigateurs, vous devez utiliser document.body.scrollTop pour cela. Et tout fonctionnera très bien.

Mais il existe une autre solution universelle : les méthodes spéciales de défilement de page window.scrollBy(x,y) et window.scrollTo(pageX,pageY).

• La méthode scrollBy(x,y) fera défiler la page par rapport à ses coordonnées actuelles.
• La méthode scrollTo(pageX,pageY) fait défiler la page jusqu'aux coordonnées spécifiées par rapport à l'ensemble du document. Cela équivaudra à définir les propriétés scrollLeft/scrollTop. Pour faire défiler jusqu'au début du document, il suffit de préciser les coordonnées (0,0).

défiler dans l'affichage

La méthode elem.scrollIntoView(top) doit être appelée sur l'élément et fait défiler la page pour que l'élément soit en haut si top est vrai, et en bas si top est faux. De plus, si ce paramètre supérieur n'est pas spécifié, alors il sera égal à vrai.

Anti-défilement

Il existe des situations où il est nécessaire de rendre un document « non défilant ». Par exemple, afficher une grande boîte de dialogue au-dessus d'un document afin que le visiteur puisse faire défiler la boîte de dialogue mais pas le document lui-même.

Afin d'empêcher le défilement des pages, définissez simplement la propriété document.body.style.overflow = "hidden".

Au lieu de document.body, il peut y avoir n'importe quel élément dont le défilement doit être désactivé.

Mais l’inconvénient de cette méthode est que la barre de défilement elle-même disparaît. S'il occupait une certaine largeur, alors cette largeur sera désormais libérée et le contenu de la page sera développé, le texte « sautera », occupant tout l'espace libre.

Résultats

• Pour obtenir les dimensions de la partie visible de la fenêtre, utilisez la propriété : document.documentElement.clientWidth/Height
• Pour obtenir les dimensions de la page en tenant compte du défilement, utilisez : var scrollHeight = Math.max(document.body.scrollHeight, document.documentElement.scrollHeight, document.body.offsetHeight, document.documentElement.offsetHeight, document.body.clientHeight, document. documentElement .clientHeight);