我创建了一个非常简单的网站,在我的第二个屏幕上创建一个弹出窗口。
多屏幕窗口放置API承诺做到这一点,但我不能使它工作。
我得到了关于两个屏幕的所有信息,但不能在正确的显示器上打开弹出窗口。
有谁知道吗?是因为“窗口放置”许可还是什么?
以下是我制作的简单网站:
<!DOCTYPE html>
<html>
<title>Window Placement</title>
<head>
<script type="text/javascript">
let url = "file:///C:/Users/path/to/file.html";
let x = "1000";
let y = "250";
let width = "250";
let height = "250";
let popup;
async function screenDetails() {
if (window.screen.isExtended) {
console.log("Multiple screens detected");
try {
const screens = await window.getScreenDetails();
let primary;
let second;
for (let element of screens.screens) {
if (element.isPrimary) {
primary = element;
} else {
second = element;
}
}
let features = "left=" + x + ",top=" + y +
",width=" + width + ",height=" + height;
popup = window.open(url, 'Popup', features);
} catch (err) {
console.error(err);
}
} else {
console.log("Single screen detected");
}
}
</script>
</head>
<body>
<button type="button" onclick="open()">Open</button>
</body>
</html>
2条答案
按热度按时间wn9m85ua1#
所以,我让它工作了,尽管不是在我提供代码的Stack Snippet环境中。
它确实与权限有关;你必须请求许可才能得到屏幕细节。在下面的代码中,我创建了一个新函数,它将查询执行此操作,下面代码中的
getPermissionAndScreenDetails
。它验证API是否可用,权限是否存在且未被拒绝(出于安全原因,在堆栈代码段中会自动“拒绝”)。然后,它返回调用window.getScreenDetails()
的结果,因为如果state
设置为“prompt”,则需要获得权限。我修改了你的函数以使用该函数的返回值。
我还添加了一些代码,将在它找到的第一个辅助屏幕中间打开弹出窗口。
vecaoik12#
首先,
onclick="open()"
应该是onclick="screenDetails()"
。接下来,硬编码的x
和y
值应该使用availLeft
、availTop
等。window.open
坐标的预期屏幕。而且,开启器可以在装置的辅助屏幕上;要在任何其他屏幕上打开一个窗口,您可以找到一个不是currentScreen
的screens
条目,就像我下面的片段一样。除了权限,iframes还需要“窗口管理”权限策略,这就是为什么Stack Overflow的“运行代码段”在这里不起作用。
请参见https://michaelwasserman.github.io/window-placement-demo/上的API示例代码
此代码段在任何其他屏幕上打开一个窗口;测试https://husky-imaginary-sale.glitch.me/