<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link
rel="icon"
href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🎉</text></svg>"
/>
<title>How to use multiple screens</title>
<link rel="stylesheet" href="/style.css" />
<!-- TODO: Devsite - Removed inline handlers -->
<!-- <script src="/script.js" type="module"></script> -->
</head>
<body>
<h1>How to use multiple screens</h1>
<div>
<div>
Permission Status:
<span id="permissionStatus"></span>
</div>
<div>Screens Available: <span id="screensAvail"></span></div>
</div>
<button id="detectScreen">Detect Screens</button>
<button id="create" disabled>Create Page On Random Screen</button>
</body>
</html>
: root {
color-scheme : dark light ;
}
html {
box-sizing : border-box ;
}
*,
* : before ,
* : after {
box-sizing : inherit ;
}
body {
margin : 1 rem ;
font-family : system-ui , sans-serif ;
}
const detectButton = document . querySelector ( '#detectScreen' );
const createButton = document . querySelector ( '#create' );
const permissionLabel = document . querySelector ( '#permissionStatus' );
const screensAvailLabel = document . querySelector ( '#screensAvail' );
const popupUrl = 'supporting-popup.html' ;
let screenDetails = undefined ;
let permission = undefined ;
let currentScreenLength = undefined ;
detectButton . addEventListener ( 'click' , async () => {
if ( 'getScreenDetails' in window ) {
screenDetails = await window . getScreenDetails ();
screenDetails . addEventListener ( 'screenschange' , ( event ) => {
if ( screenDetails . screens . length !== currentScreenLength ) {
currentScreenLength = screenDetails . screens . length ;
updateScreenInfo ();
}
});
try {
permission =
( await navigator . permissions . query ({ name : 'window-placement' }))
. state === 'granted'
? 'Granted'
: 'No Permission' ;
} catch ( err ) {
console . error ( err );
}
currentScreenLength = screenDetails . screens . length ;
updateScreenInfo ();
} else {
screenDetails = window . screen ;
permission = 'Multi-Screen Window Placement API - NOT SUPPORTED' ;
currentScreenLength = 1 ;
updateScreenInfo ();
}
});
createButton . addEventListener ( 'click' , () => {
const screen =
screenDetails . screens [ Math . floor ( Math . random () * currentScreenLength )];
const options = {
x : screen . availLeft ,
y : screen . availTop ,
width : screen . availWidth ,
height : screen . availHeight ,
};
window . open ( popupUrl , '_blank' , getFeaturesFromOptions ( options ));
});
const getFeaturesFromOptions = ( options ) => {
return (
'left=' +
options . x +
',top=' +
options . y +
',width=' +
options . width +
',height=' +
options . height
);
};
const updateScreenInfo = () => {
screensAvailLabel . innerHTML = currentScreenLength ;
permissionLabel . innerHTML = permission ;
if ( 'getScreenDetails' in window && screenDetails . screens . length > 1 ) {
createButton . disabled = false ;
} else {
createButton . disabled = true ;
}
};
Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 4.0 License , and code samples are licensed under the Apache 2.0 License . For details, see the Google Developers Site Policies . Java is a registered trademark of Oracle and/or its affiliates.
Last updated 2024-01-08 UTC.
[[["Easy to understand","easyToUnderstand","thumb-up"],["Solved my problem","solvedMyProblem","thumb-up"],["Other","otherUp","thumb-up"]],[["Missing the information I need","missingTheInformationINeed","thumb-down"],["Too complicated / too many steps","tooComplicatedTooManySteps","thumb-down"],["Out of date","outOfDate","thumb-down"],["Samples / code issue","samplesCodeIssue","thumb-down"],["Other","otherDown","thumb-down"]],["Last updated 2024-01-08 UTC."],[],[]]