Gérez plusieurs écrans avec l'API de localisation de fenêtres multi-écrans

L'API de localisation de fenêtres multi-écrans vous permet de lister les écrans connectés à votre machine et de placer des fenêtres sur des écrans spécifiques.

Cas d'utilisation suggérés

Voici quelques exemples de sites pouvant utiliser cette API:

• Éditeurs graphiques multi-fenêtres au
  Gimp Vous pouvez placer divers outils d'édition dans des fenêtres placées avec précision.
• Les bureaux de négociation virtuels peuvent afficher les tendances du marché dans plusieurs fenêtres, dont chacune peut être visualisée en mode plein écran.
• Les applications de diaporama peuvent afficher les notes du conférencier sur l'écran principal interne et la présentation sur un projecteur externe.

État actuel

Comment utiliser l'API de localisation de fenêtres multi-écrans

Activation via chrome: // flags

Pour tester localement l'API de placement de fenêtres multi-écrans, sans jeton de test source, activez l'option #enable-experimental-web-platform-features drapeau sur chrome://flags.

Activer le support lors de la phase de preuve d'origine

À partir de Chrome 86, l'API de localisation de fenêtres multi-écrans sera disponible comme preuve d'origine dans Chrome. La preuve d'origine devrait se terminer sur Chrome 88 (24 février 2021).

Les tests d'origine vous permettent de tester de nouvelles fonctionnalités et de fournir des commentaires sur leur convivialité, leur caractère pratique et leur efficacité à la communauté des normes Web. Pour plus d'informations, consultez le Guide de test d'origine pour les développeurs Web. Pour vous inscrire à cette preuve d'origine ou à toute autre preuve d'origine, visitez le page d'inscription.

Inscrivez-vous pour obtenir une preuve d'origine

1. Demander un jeton par votre origine.
2. Ajoutez le jeton à vos pages. Il y a deux façons de le faire:
   • Ajouter un origine-procès balise à l'en-tête de chaque page. Par exemple, cela pourrait ressembler à ceci:
     
   • Si vous pouvez configurer votre serveur, vous pouvez également ajouter le jeton à l'aide d'un Essai d'origine En-tête HTTP. L'en-tête de réponse qui en résulte doit ressembler à ceci:
     Essai d'origine: TOKEN_GOES_HERE

Le problème

L'approche éprouvée du contrôle des fenêtres,
Window.open (), malheureusement pas au courant des écrans supplémentaires. Alors que certains aspects de cette API semblent un peu archaïques, comme son
fenêtreCaractéristiques
DOMString paramètre, cependant, nous a bien servi au fil des ans. Pour spécifier une fenêtre
positionner, vous pouvez passer les coordonnées comme la gauche y Haut (ou alors screenX y écranY respectivement) et passez le
Taille Quoi
largeur y la taille (ou alors innerWidth y innerHeight respectivement). Par exemple, pour ouvrir une fenêtre 400 × 300 à 50 pixels de la gauche et 50 pixels du haut, voici le code que vous pouvez utiliser:

const surgir = la fenêtre.open(
"https://example.com/",
"My Popup",
"left=50,top=50,width=400,height=300"
);

Vous pouvez obtenir des informations sur l'écran actuel en consultant le
window.screen propriété, qui renvoie un Écran objet. Voici la sortie sur mon MacBook Air 13 ″:

la fenêtre.écran;

Comme la plupart des gens qui travaillent dans la technologie, j'ai dû m'adapter à la nouvelle réalité du travail et créer mon propre bureau à domicile. La mienne ressemble à la photo ci-dessous (si vous êtes intéressé, vous pouvez lire le
détails complets sur ma configuration). L'iPad à côté de mon MacBook Air est connecté à l'ordinateur portable via
Side-cardonc quand j'en ai besoin, je peux rapidement transformer l'iPad en un deuxième écran.

Si je veux profiter de l'écran plus grand, je peux mettre la fenêtre contextuelle de l'exemple de code ci-dessus sur le deuxième écran. Je fais ça comme ça:

surgir.moveTo(2500, 50);

C'est une hypothèse approximative, car il n'y a aucun moyen de connaître les dimensions du deuxième écran. Les informations de window.screen Il ne couvre que l'écran intégré, mais pas l'écran de l'iPad. Le rapporté largeur de l'écran intégré était 1680 pixels, donc en mouvement vers
2500 pixels force travailler pour changer la fenêtre sur l'iPad, comme je Je sais qu'il se trouve à droite de mon MacBook Air. Comment puis-je faire cela dans le cas général? Il s'avère qu'il existe un meilleur moyen que de deviner. C'est ainsi que fonctionne l'API de placement de fenêtres multi-écrans.

Détection des fonctionnalités

Pour vérifier si l'API de placement de fenêtre multi-écran est prise en charge, utilisez:

si ("getScreens" dans la fenêtre) {
}

Les placement de fenêtre permis

Avant de pouvoir utiliser l'API de placement de fenêtres multi-écrans, je dois demander à l'utilisateur l'autorisation de le faire. Le nouveau placement de fenêtre Le permis peut être consulté auprès du
API des autorisations aimer:

laisser granted = faux;
try {
const { Etat } = attendre navigateur.permissions.mettre en doute({ patate douce: "window-placement" });
granted = Etat === "granted";
} catch {
}

Le Navigateur
pouvez
Choisissez d'afficher la demande d'autorisation de manière dynamique lors de la première tentative d'utilisation de l'une des nouvelles méthodes d'API. Lisez la suite pour plus d'informations.

Les isMultiScreen () méthode

Pour utiliser l'API de placement de fenêtre multi-écran, je vais d'abord appeler le
Window.isMultiScreen () méthode. Renvoie une promesse résolue avec vrai ou faux, selon qu'un ou plusieurs écrans sont actuellement connectés à la machine. Pour ma configuration, ça remonte vrai.

attendre la fenêtre.isMultiScreen();

Les getScreens () méthode

Maintenant que je sais que la configuration actuelle est multi-écran, je peux obtenir plus d'informations sur le deuxième écran en utilisant Window.getScreens (). Renvoie une promesse qui se résout en un tableau de Écran objets. Sur mon MacBook Air 13 avec un iPad connecté, cela renvoie un tableau de deux Écran objets:

attendre la fenêtre.getScreens();

Remarquez comment la valeur de la gauche pour iPad commence à 1680, qui est exactement le largeur de l'écran intégré. Cela me permet de déterminer exactement comment les écrans sont disposés logiquement (côte à côte, les uns sur les autres, etc.). Il y a aussi des données maintenant pour chaque écran pour montrer s'il s'agit d'un interne un et si c'est un primaire une. Veuillez noter que l'écran intégré
pas forcément l'écran principal. Ils ont tous les deux aussi va, qui, s'il persiste dans les sessions du navigateur, permet de restaurer la distribution des fenêtres.

Les changement d'écran un événement

La seule chose qui manque maintenant est un moyen de détecter quand mes paramètres d'affichage changent. Un nouvel événement
changement d'écran, il fait exactement cela: il se déclenche à chaque fois que la constellation à l'écran change. (Notez que "screens" est au pluriel dans le nom de l'événement). Il est également activé lorsque la résolution de l'un des écrans connectés change ou lorsqu'un écran nouveau ou existant est (physiquement ou virtuellement dans le cas d'un Sidecar) connecté ou déconnecté.

Notez que vous devez rechercher les détails du nouvel écran de manière asynchrone, changement d'écran L'événement lui-même ne fournit pas ces données. Cela peut changement dans le futur. Pour l'instant, vous pouvez trouver les détails de l'écran en appelant window.getScreens () Comme indiqué ci-dessous.

la fenêtre.addEventListener('screenschange', asynchrone (un événement) => {
console.Journal('I am there, but mostly useless', un événement);
const des détails = attendre la fenêtre.getScreens();
});

Nouvelles options plein écran

Jusqu'à présent, vous pouviez demander que les éléments soient affichés en mode plein écran via le nom approprié
requestFullScreen ()

méthode. La méthode prend un options paramètre où vous pouvez passer
Plein écranOptions. Jusqu'à présent, sa seule propriété était
navigationUI. L'API d'emplacement de fenêtre multi-écran en ajoute une nouvelle écran propriété qui vous permet de déterminer sur quel écran démarrer la vue plein écran. Par exemple, si vous souhaitez que l'écran principal soit en plein écran:

try {
const primaryScreen = (attendre getScreens()).filter((écran) => écran.primaire)[0];
attendre document.corps.requestFullscreen({ écran: primaryScreen });
} catch (err) {
console.Erreur(err.patate douce, err.un message);
}

Polyfill

L'API de placement de fenêtre multi-écran ne peut pas être remplie, mais vous pouvez ajuster sa forme afin de pouvoir coder exclusivement avec la nouvelle API:

si (!("getScreens" dans la fenêtre)) {
la fenêtre.getScreens = asynchrone () => [la fenêtre.écran];
la fenêtre.isMultiScreen = asynchrone () => faux;
}

Les autres aspects de l'API: le onscreenschange événement et le écran propriété de la
Plein écranOptions: Les navigateurs non pris en charge ne se déclencheraient jamais ni ne les ignoreraient en silence, respectivement.

Manifestation

Si vous êtes comme moi, vous suivez de près l'évolution des différentes crypto-monnaies. (Je ne le fais pas réellement, mais pour le bien de cet article, je suppose que je le fais.) Pour garder une trace des crypto-monnaies que je possède, j'ai développé une application Web qui me permet d'observer les marchés dans une vie. situations, comme dans le confort de mon lit, où j'ai une configuration d'écran unique décente.

En ce qui concerne la cryptographie, les marchés peuvent devenir instables à tout moment. Si cela devait arriver, je peux rapidement passer à mon bureau où j'ai une configuration multi-écrans. Je peux cliquer sur n'importe quelle fenêtre de pièces et voir rapidement tous les détails en plein écran sur l'écran opposé. Ci-dessous, une photo récente de moi prise lors de la dernière Bain de sang YCY. Cela m'a pris complètement au dépourvu et m'a laissé
avec mes mains sur mon visage.

Tu peux jouer avec manifestation intégré ci-dessous, ou affichez votre code source en échec.

Sécurité et autorisations

L'équipe Chrome a conçu et mis en œuvre l'API Multi-Screen Window Location en utilisant les principes de base définis dans Contrôlez l'accès aux fonctionnalités puissantes de la plate-forme Web, y compris le contrôle de l'utilisateur, la transparence et l'ergonomie. L'API d'emplacement de fenêtre multi-écran expose de nouvelles informations sur les écrans connectés à un appareil, augmentant l'empreinte digitale des utilisateurs, en particulier ceux dont plusieurs écrans sont constamment connectés à leurs appareils. Pour atténuer ce problème de confidentialité, les propriétés de l'écran exposées sont limitées au minimum nécessaire pour les cas d'utilisation d'emplacement courants. L'autorisation de l'utilisateur est requise pour que les sites récupèrent des informations à partir de plusieurs écrans et placent des fenêtres sur d'autres écrans.

Contrôle utilisateur

L'utilisateur a le contrôle total de l'exposition de ses paramètres. Ils peuvent accepter ou rejeter la demande d'autorisation et révoquer une autorisation précédemment accordée via la fonction d'information du site dans le navigateur.

Transparence

Le fait que l'autorisation d'utiliser l'API de localisation de fenêtres multi-écrans a été accordée est exposé dans les informations du site du navigateur et peut également être consulté via l'API des autorisations.

Persistance des autorisations

Le navigateur conserve les autorisations accordées. L'autorisation peut être révoquée via les informations du site du navigateur.

Retour

L'équipe Chrome souhaite connaître vos expériences avec l'API de localisation de fenêtres multi-écrans.

Parlez-nous de la conception de l'API

Y a-t-il quelque chose dans l'API qui ne fonctionne pas comme prévu? Ou vous manquez-vous des méthodes ou des propriétés dont vous avez besoin pour mettre en œuvre votre idée? Vous avez une question ou un commentaire sur le modèle de sécurité?

• Déposer un problème de spécification dans le Dépôt GitHubou ajoutez vos réflexions à un problème existant.

Signaler un problème avec le déploiement

Vous avez trouvé un bogue avec la mise en œuvre de Chrome? Ou la mise en œuvre est-elle différente de la spécification?

• Signaler un bogue dans new.crbug.com. Assurez-vous d'inclure autant de détails que possible, des instructions simples à reproduire et de saisir Clignoter> WindowDialog dans le
  Composants (modifier) boîte. Échec fonctionne très bien pour un partage rapide et facile des répétitions.

Afficher la prise en charge de l'API

Vous envisagez d'utiliser l'API de placement de fenêtres multi-écrans? Votre assistance publique aide l'équipe Chrome à hiérarchiser les fonctionnalités et montre aux autres fournisseurs de navigateurs à quel point il est important de les prendre en charge.

• Partagez comment vous prévoyez de l'utiliser dans le Fil de discussion WICG
• Envoyez un tweet à @Cromodev avec lui #WindowPlacement hashtag et indiquez-nous où et comment vous l'utilisez.
• Demandez à d'autres fournisseurs de navigateurs d'implémenter l'API.

Liens utiles

Je veux aller plus loin

Merci

La spécification de l'API de l'emplacement de la fenêtre multi-écran a été modifiée par
Victor Costan y
Cloche de Joshua. L'API a été implémentée par
Mike Wasserman. Cet article a été révisé par
Joe medley,
François Beauforty Kayce Basques. Merci à Laura Torrent Puig pour les photos.