วิธีใช้หลายหน้าจอ

เพื่อให้แน่ใจว่าเบราว์เซอร์รองรับเมธอด getScreenDetails() ก่อนอื่นให้ตรวจสอบว่ามีเมธอดอยู่ในออบเจ็กต์ window หรือไม่ จากนั้นโทรหา window.getScreenDetails() เพื่อรับหน้าจอที่แนบ การเพิ่ม Listener เหตุการณ์เพื่อปรับให้เข้ากับรายละเอียดหน้าจอที่เปลี่ยนไปจะช่วยให้คุณจัดการหน้าจอหลายหน้าจอได้ตามความต้องการของแอป

if ('getScreenDetails' in window) {
 
// The Window Management API is supported.
 
const screenDetails = await window.getScreenDetails();
  screenDetails
.addEventListener('screenschange', (event) => {
   
// Handle screens change.
 
});
}

การสนับสนุนเบราว์เซอร์

  • 100
  • 100
  • x
  • x

แหล่งที่มา

วิธีคลาสสิก

การใช้เมธอด window.screen

ไม่มีวิธีคลาสสิกในการควบคุมเลย์เอาต์หลายหน้าจอ แต่คุณกลับไปควบคุมหน้าจอปัจจุบันได้โดยใช้พร็อพเพอร์ตี้ window.screen และ Polyfill รูปร่าง API ใหม่

if (!('getScreenDetails' in window)) {
 
// Returning a one-element array with the current screen,
 
// noting that there might be more.
  window
.getScreenDetails = async () => [window.screen];
 
// Set to `false`, noting that this might be a lie.
  window
.screen.isExtended = false;
}

การสนับสนุนเบราว์เซอร์

  • 1
  • 12
  • 1
  • 1

แหล่งที่มา

การเพิ่มประสิทธิภาพแบบต่อเนื่อง

การสาธิตด้านล่างจะแสดงวิธีจัดการหน้าจอหลายหน้าจอด้วย Window Management API โค้ดจะตรวจสอบความสามารถของเบราว์เซอร์ก่อนแล้วจึงกลับไปใช้แบบคลาสสิก

const detectButton = document.querySelector('#detectScreen');
const createButton = document.querySelector('#create');
const permissionLabel = document.querySelector('#permissionStatus');
const screensAvailLabel = document.querySelector('#screensAvail');
const popupUrl = './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-management' })).state === 'granted'
         
? 'Granted'
         
: 'No Permission';
   
} catch (err) {
      console
.error(err);
   
}
    currentScreenLength
= screenDetails.screens.length;
    updateScreenInfo
();
 
} else {
    screenDetails
= window.screen;
    permission
= 'Window Management API - NOT SUPPORTED';
    currentScreenLength
= 1;
    updateScreenInfo
();
 
}
});

createButton
.addEventListener('click', () => {
  let screen
= screenDetails.screens[Math.floor(Math.random() * currentScreenLength)];
  options
= {
    x
: screen.availLeft,
    y
: screen.availTop,
    width
: screen.availWidth,
    height
: screen.availHeight,
 
};
  window
.open(popupUrl, '_blank', getFeaturesFromOptions(options));
});

function getFeaturesFromOptions(options) {
 
return (
   
'left=' +
    options
.x +
   
',top=' +
    options
.y +
   
',width=' +
    options
.width +
   
',height=' +
    options
.height
 
);
}

updateScreenInfo
= () => {
  screensAvailLabel
.innerHTML = currentScreenLength;
  permissionLabel
.innerHTML = permission;
 
if ('getScreenDetails' in window && screenDetails.screens.length >= 1) {
    createButton
.disabled = false;
 
} else {
    createButton
.disabled = true;
 
}
};

อ่านเพิ่มเติม

ข้อมูลประชากร

<!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: 1rem;
 
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;
 
}
};