参考这个代码
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>显示器检测与窗口定位</title>
<style>
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
line-height: 1.6;
color: #333;
max-width: 800px;
margin: 2rem auto;
padding: 0 1rem;
}
h1, h2 {
color: #1a1a1a;
}
#detectButton {
background-color: #007bff;
color: white;
border: none;
padding: 10px 20px;
font-size: 16px;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s;
}
#detectButton:hover {
background-color: #0056b3;
}
#detectButton:disabled {
background-color: #cccccc;
cursor: not-allowed;
}
#info {
margin-top: 2rem;
padding: 1rem;
background-color: #f8f9fa;
border: 1px solid #dee2e6;
border-radius: 5px;
}
.screen-card {
border: 1px solid #ccc;
border-radius: 8px;
padding: 15px;
margin-bottom: 15px;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.screen-card h3 {
margin-top: 0;
color: #0056b3;
}
.screen-card button {
margin-top: 10px;
background-color: #28a745;
color: white;
border: none;
padding: 8px 15px;
border-radius: 4px;
cursor: pointer;
}
.screen-card button:hover {
background-color: #218838;
}
.error {
color: #dc3545;
font-weight: bold;
}
.notice {
font-size: 0.9em;
color: #6c757d;
}
</style>
</head>
<body>
<h1>JavaScript 显示器检测与窗口定位</h1>
<p class="notice">注意：此功能需要使用Chrome或Edge等现代浏览器，并且需要在HTTPS安全环境下运行。首次点击时，浏览器会请求“窗口管理”权限。</p>
<button id="detectButton">1. 检测显示器</button>
<div id="info">
<p>请先点击按钮以检测您的显示器配置。</p>
</div>
<script>
const detectButton = document.getElementById('detectButton');
const infoDiv = document.getElementById('info');
let screenDetails = null; // 用于存储获取到的屏幕信息
// 步骤 1: 检查浏览器是否支持该API
if (!('getScreenDetails' in window)) {
detectButton.disabled = true;
infoDiv.innerHTML = '<p class="error">抱歉，您的浏览器不支持窗口管理API (Window Management API)。请尝试使用最新版本的Google Chrome或Microsoft Edge。</p>';
}
// 步骤 2: 为按钮添加点击事件监听器
detectButton.addEventListener('click', async () => {
try {
// 步骤 3: 请求权限并获取屏幕详情
// 这会触发浏览器向用户显示权限请求弹窗
screenDetails = await window.getScreenDetails();
// 步骤 4: 更新UI以显示检测结果
updateScreenInfo();
// 监听屏幕变化事件，例如用户连接/断开显示器
screenDetails.addEventListener('screenschange', () => {
screenDetails = screenDetails.screens; // 更新为最新的屏幕列表
updateScreenInfo();
});
} catch (err) {
if (err.name === 'NotAllowedError') {
infoDiv.innerHTML = `<p class="error">您拒绝了“窗口管理”权限请求。功能无法使用。</p>`;
} else {
infoDiv.innerHTML = `<p class="error">发生错误：${err.message}</p>`;
}
console.error(err);
}
});
// 函数：更新界面，显示所有屏幕信息
function updateScreenInfo() {
const screens = screenDetails.screens;
infoDiv.innerHTML = `<h2>检测到 ${screens.length} 个显示器</h2>`;
screens.forEach((screen, index) => {
const card = document.createElement('div');
card.className = 'screen-card';
card.innerHTML = `
<h3>显示器 ${index + 1} ${screen.isPrimary ? ' (主显示器)' : ''}</h3>
<ul>
<li><strong>分辨率:</strong> ${screen.width} x ${screen.height}</li>
<li><strong>可用分辨率:</strong> ${screen.availWidth} x ${screen.availHeight}</li>
<li><strong>色彩深度:</strong> ${screen.colorDepth} bpp</li>
<li><strong>像素比 (DPR):</strong> ${screen.devicePixelRatio}</li>
<li><strong>屏幕坐标 (左, 上):</strong> (${screen.left}, ${screen.top})</li>
</ul>
<button onclick="openWindowOnScreen(${index})">在此显示器上打开新网页</button>
`;
infoDiv.appendChild(card);
});
}
// 函数：在指定索引的屏幕上打开新窗口
function openWindowOnScreen(index) {
if (!screenDetails || !screenDetails.screens[index]) {
alert('找不到指定的屏幕信息！');
return;
}
const screen = screenDetails.screens[index];
const targetUrl = 'https://www.bing.com'; // 你想打开的网页URL
// 计算窗口位置和大小
// 我们将窗口放置在目标屏幕的中心，大小为其可用区域的80%
const windowWidth = Math.floor(screen.availWidth * 0.8);
const windowHeight = Math.floor(screen.availHeight * 0.8);
const windowLeft = screen.left + Math.floor((screen.availWidth - windowWidth) / 2);
const windowTop = screen.top + Math.floor((screen.availHeight - windowHeight) / 2);
// 步骤 5: 使用 window.open() 和坐标参数来指定窗口位置
const features = `
left=${windowLeft},
top=${windowTop},
width=${windowWidth},
height=${windowHeight},
menubar=no,
toolbar=no,
location=no,
status=no,
resizable=yes,
scrollbars=yes
`;
console.log(`尝试在显示器 ${index + 1} 上打开窗口，坐标:`, features);
window.open(targetUrl, '_blank', features.replace(/\s/g, ''));
}
</script>
</body>
</html> 网友回复
我知道答案，我要回答
私活外包
