搜索

回答

参考这个代码

<!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>

网友回复

我知道答案，我要回答

我有问题

私活外包

回答

开发了一个网站ai聊天助手

一个月开发一套类似coze的智能体平台

部署一套内网离线ai助理

私有ai助理开发

类似如家的租房app开发

h5手机端考试网站开发

开发一个短剧解锁剧集的小程序

我要开发一个酒类拍卖交易平台

开发艺术品拍卖收藏买画卖画h5网站

帮我做个数字货币交易所网站

gemini cli如何无需vpn在国内使用？

genai中client.models.generate_content如何流式stream输出、temperature、打开推理思考设置提示词？

js如何检测电脑显示器个数并投屏到指定显示器打开网页？

怎么解决gemini cli登录谷歌账号需要GOOGLE_CLOUD_PROJECT才能使用的问题？

什么是llm os大模型操作系统？

如果在电脑上可以旅行世界各地的风景街景？

python有没有共享打印机的库？

为啥浏览器中js请求gemini兼容openai的api出现断句？

如何让ai生成漂亮流程图？

cloudflare的ai gateway中如何使用兼容openai方式访问gemini，baseurl是什么？