Palances Liao
Thomas Steiner
Phong cách hiện đại
Sử dụng window.getScreenDetails()
Để đảm bảo trình duyệt của bạn hỗ trợ phương thức getScreenDetails(), trước tiên, hãy kiểm tra xem phương thức này có tồn tại trên đối tượng window hay không. Sau đó, hãy gọi window.getScreenDetails() để xem màn hình đính kèm. Việc thêm trình nghe sự kiện để thích ứng với thông tin chi tiết về màn hình được thay đổi cho phép bạn quản lý nhiều màn hình theo nhu cầu của ứng dụng.
if ('getScreenDetails' in window) {
// The Window Management API is supported.
const screenDetails = await window.getScreenDetails();
screenDetails.addEventListener('screenschange', (event) => {
// Handle screens change.
});
}
Cách cổ điển
Sử dụng phương thức window.screen
Không có cách cũ nào để điều khiển bố cục nhiều màn hình, nhưng bạn có thể quay lại kiểm soát màn hình hiện tại bằng cách sử dụng thuộc tính window.screen và polyfill hình dạng API mới.
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;
}
Cải tiến tăng dần
Bản minh hoạ dưới đây cho thấy cách bạn có thể xử lý nhiều màn hình bằng API Quản lý cửa sổ. Mã này kiểm tra chức năng của trình duyệt trước rồi sau đó quay lại cách cổ điển.
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;
}
};
Tài liệu đọc thêm
Bản minh hoạ
HTML
<!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>CSS
:root {
color-scheme: dark light;
}
html {
box-sizing: border-box;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
body {
margin: 1rem;
font-family: system-ui, sans-serif;
}
JS
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;
}
};