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

Obtenez des informations sur les écrans connectés et la position des fenêtres par rapport à ces écrans.

14 septembre 2020
Mise à jour 14 septembre 2020

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 puede configurar su serveurLos servidores son ordenadores centrales y potentes dentro del campo de la tecnología de la información que procesan y proporcionan software y archivos en una red. Desde el punto de vista de un cliente, varios ordenadores en una red pueden ponerse en contacto con el servidor central para conseguir la información solicitada. En la arquitectura cliente-servidor, el servidor puede ser un software que proporciona un servicio y se ejecuta en Suite, también puede agregar el token usando un Essai d'origine Encabezado HTTPEl HTTP (Hyper Text Transfer Protocol) es un protocolo que se usa para transmitir datos en redes. HTTP es un estándar técnico generalmente aceptado que establece cómo un cliente web se comunica con un servidor para que los datos solicitados por el cliente puedan ser cargados y mostrados. Información general Junto con el URL y el HTML, HTTP es uno de los conceptos más importantes de Internet (www). Fue desarrollado Suite. El encabezado de respuesta resultante debería verse así:
     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;

Como la mayoría de las gensLas personas son personalidades imaginarias que representan a un determinado grupo objetivo. En el marketing online, las personas ayudan a entender mejor a los usuarios de un portal web o a los clientes de una tienda online. Concepto de personas Para que las personas puedan ejercer su efecto positivo, deben ser lo más detalladas viable. Esto conlleva un término exhaustiva de los grupos destinatarios para conseguir datos empíricos. La próxima Suite que trabajan en tecnología, he tenido que adaptarme a la nueva realidad laboral y montar mi propia oficina en casa. El mío se ve como en la foto de abajo (si está interesado, puede leer el
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 douteConcepto de Query¿Qué es una Query?Una query, en inglés, es una definición que significa pregunta. Trasladando este concepto al marketing digital y a internet, se traduce como el concepto que un usuario escribe en un buscador, véase Google, cuando desea realizar una búsqueda usando keywords o palabras clave. Es la serie de términos reales que se utilizan al momento de ir en busca de información en estos portales.Cuando un consumidor Suite({ patate douce: "window-placement" });
granted = Etat === "granted";
} catch {
}

le le navigateurUn navegador (además: browser) es una herramienta informática que te permite ver documentos y datos y navegar por la red. Los navegadores pueden mostrar distintos tipos de recursos de información; principalmente documentos HTML, a pesar de todo, además son posibles otros tipos de archivos y contenido multimedia, como PDF, JPEG, MPEG, GIF o el lenguaje de meta marcado. A través el uso de complementos especiales y la configuración respectivo, los Suite
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énementConcepto de Evento¿Qué es un Evento?Un Evento es una actividad de carácter social que suele tener cierta proyección a nivel público y, de esta manera, suscita el interés de un determinado sector relacionado con la temática o con la razón por el que se celebra. Es un tipo de acto que suele tener mucha repercusión a nivel empresarial.Podemos hallar distintos tipos de eventos, desde los deportivos hasta los empresariales, pasando Suite

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 navigateursConcepto de Navegadores¿Qué son los Navegadores?Los Navegadores son herramientas informáticas que utilizamos para, normalmente, navegar por Internet y visitar cualquier página web, al mismo tiempo de para hacer otras tareas como ver documentos, observar vídeos o reproducir contenido multimedia de cualquier tipo. Son un tipo de software sencillamente usual y bastante utilizado hoy en día.Insistimos en que es algo que se utiliza con mucha frecuencia, puesto que moverse por Internet Suite no compatibles nunca dispararían o ignorarían silenciosamente, respectivamente.

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
• Envoyer un tweeterUn tweet es un mensaje corto que puede ser enviado por medio de del servicio de microblogging Twitter. ¿Qué es un tweet? Un tweet es un mensaje de estado en Twitter que puede tener hasta 280 caracteres. Los tweets solían limitarse a 140 caracteres, pero esta cantidad se incrementó a 280 en septiembre de 2017. Debido al espacio limitado para el texto, las URLs para uso en tweets son normalmente Suite à @Cromodev avec lui #WindowPlacement hashtagConcepto de Hashtag¿Qué es un Hashtag?Un Hashtag es una almohadilla (#), o más bien, una palabra que se adjunta a esta para crear una etiqueta en determinadas redes sociales. Utilizada en un comienzo por Twitter, poco a poco se ha ido extendiendo por demás rincones de la red de redes, hasta el punto de ser uno de los componentes esenciales al momento de transmitir información, agrupar contenidos o catalogar tendencias.Facebook, Suite et faites-nous savoir 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.