OUJOOD.COM
Définition des propriétés screenLeft et screenTop
JavaScript cours tutorialLes propriétés screenLeft et screenTop de l'objet Window permettent de récupérer la position d'une fenêtre navigateur par rapport à l'écran de l'utilisateur. Ces propriétés retournent respectivement :
- screenLeft : la coordonnée horizontale (X) en pixels depuis le bord gauche de l'écran
- screenTop : la coordonnée verticale (Y) en pixels depuis le bord supérieur de l'écran
Ces propriétés sont particulièrement utiles lorsque vous travaillez avec plusieurs fenêtres ou popups et que vous devez connaître ou contrôler leur positionnement à l'écran.
Syntaxe
let positionX = window.screenLeft;
let positionY = window.screenTop;
Valeurs retournées : Un nombre entier représentant la position en pixels (lecture seule).
Compatibilité navigateurs
Les propriétés screenLeft et screenTop sont supportées par la majorité des navigateurs modernes : Chrome, Edge, Safari, Opera et Internet Explorer.
Note importante : Firefox utilise une nomenclature différente avec les propriétés équivalentes window.screenX et window.screenY. Pour une compatibilité maximale, il est recommandé de détecter le navigateur ou d'utiliser les deux syntaxes.
Exemple pratique : Afficher la position d'une fenêtre
Cet exemple montre comment récupérer et afficher les coordonnées d'une nouvelle fenêtre par rapport à l'écran de l'utilisateur.
Exemple : 📋 Copier le code
<!doctype html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Exemple screenLeft et screenTop</title>
<script>
function ouvrirFenetre() {
// Création d'une nouvelle fenêtre
let maFenetre = window.open('', '', 'width=400,height=300');
// Affichage des coordonnées
maFenetre.document.write("<h2>Position de cette fenêtre</h2>");
maFenetre.document.write("<p>Distance du bord gauche (screenLeft) : <strong>" +
maFenetre.screenLeft + " pixels</strong></p>");
maFenetre.document.write("<p>Distance du bord supérieur (screenTop) : <strong>" +
maFenetre.screenTop + " pixels</strong></p>");
}
</script>
</head>
<body>
<h1>Démonstration screenLeft et screenTop</h1>
<button onclick="ouvrirFenetre()">Ouvrir une fenêtre et voir sa position</button>
</body>
</html>
Exemple avancé : Compatibilité cross-browser
Pour assurer une compatibilité maximale avec tous les navigateurs, y compris Firefox, voici une fonction qui gère les deux syntaxes :
Exemple : 📋 Copier le code
<script>
function obtenirPositionFenetre() {
// Détection de la propriété supportée
let posX = typeof window.screenLeft !== 'undefined' ?
window.screenLeft : window.screenX;
let posY = typeof window.screenTop !== 'undefined' ?
window.screenTop : window.screenY;
return {
x: posX,
y: posY
};
}
// Utilisation
let position = obtenirPositionFenetre();
console.log("Position X : " + position.x + "px");
console.log("Position Y : " + position.y + "px");
</script>
Cas d'usage courants
Les propriétés screenLeft et screenTop sont utiles dans plusieurs scénarios :
- Positionnement de popups : Centrer une fenêtre popup par rapport à l'écran principal
- Applications multi-fenêtres : Gérer la disposition de plusieurs fenêtres ouvertes simultanément
- Restauration de session : Sauvegarder et restaurer la position des fenêtres entre les sessions
- Détection de configuration : Analyser la configuration multi-écrans de l'utilisateur
Points importants à retenir
À savoir :
- Ces propriétés sont en lecture seule, vous ne pouvez pas les modifier directement
- Les valeurs incluent les bordures et barres de titre du navigateur
- Pour Firefox, utilisez plutôt screenX et screenY
- Les coordonnées peuvent être négatives si la fenêtre est positionnée sur un écran secondaire à gauche
- Pour déplacer une fenêtre, utilisez la méthode window.moveTo()