当前位置：首页 > news >正文

Chrome/Edge浏览器使用多屏完美解决方案，http部署使用https部署的功能

news 来源：原创 2025/5/3 16:16:51

多屏使用场景：例如1屏显示录入操作界面，2屏显示SOP。或者每个屏上显示不同的看板内容等

废话不少说，直接上代码：将下面的代码复制到txt记事本里，保存为html格式即可本地观看效果

<!DOCTYPE html>
<html>
<body><button onclick="initDualScreen()">启动双屏模式</button><div id="screen1" class="screen"></div><div id="screen2" class="screen"></div><script>async function initDualScreen() {// 1. 请求多屏幕权限const permission = await window.getScreenDetails();if (permission.screens.length < 2) {alert('未检测到第二块屏幕！');return;}// 2. 获取屏幕信息const [primaryScreen, secondaryScreen] = permission.screens;// 3. 主窗口占据第一屏幕window.moveTo(primaryScreen.left, primaryScreen.top);window.resizeTo(primaryScreen.width, primaryScreen.height);// 4. 创建副窗口并定位到第二屏幕const features = `noopener=yes,left=${secondaryScreen.left},top=${secondaryScreen.top},width=${secondaryScreen.width},height=${secondaryScreen.height}`;const secondWindow = window.open('', '_blank', features);// 5. 内容分发document.getElementById('screen1').innerHTML =`<h1>主屏幕内容 (${secondaryScreen.width}x${primaryScreen.height})</h1>`;secondWindow.document.body.innerHTML = `<style>body { margin:0; background:#f0f0f0; }.screen { padding:20px; }</style><div class="screen"><h1>扩展屏幕内容 (${secondaryScreen.width}x${secondaryScreen.height})</h1></div>        `;}</script><style>.screen {width: 100vw;height: 100vh;padding: 20px;background: linear-gradient(45deg, #e0f2fe, #bae6fd);}</style>
</body>
</html>

上面的代码如果发布到服务器，如果使用http部署是无法使用的，只有https部署才能正常使用。

http部署有安全限制，需要单独设置

Chrome设置如下

--no-sandbox --test-type --unsafely-treat-insecure-origin-as-secure=域名

例如：

--no-sandbox --test-type --unsafely-treat-insecure-origin-as-secure=http://192.168.1.100

在桌面快捷方式添加即可