Obtenir les coordonnées où se trouve l'écran du navigateur

Question

Je voudrais ouvrir une nouvelle fenêtre en utilisant javascript et window.open mais mon idée est d'ouvrir cette fenêtre, une petite fenêtre, sur le centre horizontal et vertical de la fenêtre actuelle.

Pour simplifier, supposons que j'ai un écran de 1024x768 et que je veux afficher une petite fenêtre de 200x100 devant celui-ci. J'ai donc besoin que cette petite fenêtre soit centrée à (512,384) qui est le centre de (1024,768).

Quelque chose comme ça :

J'utilise ce code pour découvrir les coordonnées actuelles :

var x = window.screenX;
var y = window.screenY;
... proceed to window.open...

mais cela produit une fenêtre qui ressemble à ceci

et parce que j'ai 2 moniteurs, lorsque le navigateur est sur le moniteur 2, cela produit une petite fenêtre positionnée dans le coin supérieur du premier moniteur.

Y a-t-il un moyen d'obtenir les bonnes coordonnées ?

Answer 1

Vous pouvez utiliser innerWidth et innerHeight de la fenêtre pour la centrer :

const popupWidth = 200;
const popupHeight = 100;
const popupTop = (window.innerHeight / 2) - (popupHeight / 2);
const popupLeft = (window.innerWidth / 2) - (popupWidth / 2);

window.open('https://google.com', 'Google Search', `width=${popupWidth},height=${popupHeight},top=${popupTop},left=${popupLeft}`);

Note : J'ai utilisé une chaîne ES6 ici juste pour la simplicité.

PS : je viens de remarquer que quelqu'un a posté un lien vers la même question avec le même type de réponses - ceci fonctionne, donc si ce n'est pas le cas, veuillez expliquer comment cela ne fonctionne pas et quel navigateur vous utilisez !