在多显示器系统上使用 javascript window.open() 时,如何控制弹出窗口打开的显示器或显示空间中的哪个位置?这对我来说似乎失控了,否则它的行为是随机的。
多显示器/双显示器系统上的 window.open() - 窗口在哪里弹出?
“window.open 双屏”搜索结果揭示了这个奇特的金块:双显示器和 Window.open
“当用户点击一个使用 window.open 打开新窗口的链接时。使窗口与其父窗口显示在同一监视器上。”
// Find Left Boundry of the Screen/Monitor
function FindLeftScreenBoundry()
{
// Check if the window is off the primary monitor in a positive axis
// X,Y X,Y S = Screen, W = Window
// 0,0 ---------- 1280,0 ----------
// | | | --- |
// | | | | W | |
// | S | | --- S |
// ---------- ----------
if (window.leftWindowBoundry() > window.screen.width)
{
return window.leftWindowBoundry() - (window.leftWindowBoundry() - window.screen.width);
}
// Check if the window is off the primary monitor in a negative axis
// X,Y X,Y S = Screen, W = Window
// 0,0 ---------- -1280,0 ----------
// | | | --- |
// | | | | W | |
// | S | | --- S |
// ---------- ----------
// This only works in Firefox at the moment due to a bug in Internet Explorer opening new windows into a negative axis
// However, you can move opened windows into a negative axis as a workaround
if (window.leftWindowBoundry() < 0 && window.leftWindowBoundry() > (window.screen.width * -1))
{
return (window.screen.width * -1);
}
// If neither of the above, the monitor is on the primary monitor whose's screen X should be 0
return 0;
}
window.leftScreenBoundry = FindLeftScreenBoundry;
编写代码后,您现在可以使用 window.open 在父窗口所在的监视器上打开一个窗口。
window.open(thePage, 'windowName', 'resizable=1, scrollbars=1, fullscreen=0, height=200, width=650, screenX=' + window.leftScreenBoundry() + ' , left=' + window.leftScreenBoundry() + ', toolbar=0, menubar=0, status=1');
如果它成功地允许您在启动它的文档的同一屏幕上打开一个弹出窗口,那么通过类似的努力,您应该能够修改它以使其表现不同。
需要注意的是,正如代码长度所暗示的,jquery/javascript/browsers 中没有内置的理解多显示器的函数,只是双屏桌面只是一个放大的单个笛卡尔平面,而不是两个离散的平面。
更新
链接已死。使用这个waybackmachine链接
window.screenX
将给出当前监视器屏幕的位置。
假设监视器宽度为 1360
对于监视器 1 window.screenX = 0;
监视器 2 window.screenX = 1360;
所以通过添加左侧位置window.screenX
,弹出窗口在预期位置打开。
function openWindow() {
var width = 650;
var left = 200;
left += window.screenX;
window.open(thePage,'windowName','resizable=1,scrollbars=1,fullscreen=0,height=200,width=' + width + ' , left=' + left + ', toolbar=0, menubar=0,status=1');
return 0;
}
功能:
function PopupCenter(url, title, w, h, opts) {
var _innerOpts = '';
if(opts !== null && typeof opts === 'object' ){
for (var p in opts ) {
if (opts.hasOwnProperty(p)) {
_innerOpts += p + '=' + opts[p] + ',';
}
}
}
// Fixes dual-screen position, Most browsers, Firefox
var dualScreenLeft = window.screenLeft != undefined ? window.screenLeft : screen.left;
var dualScreenTop = window.screenTop != undefined ? window.screenTop : screen.top;
var width = window.innerWidth ? window.innerWidth : document.documentElement.clientWidth ? document.documentElement.clientWidth : screen.width;
var height = window.innerHeight ? window.innerHeight : document.documentElement.clientHeight ? document.documentElement.clientHeight : screen.height;
var left = ((width / 2) - (w / 2)) + dualScreenLeft;
var top = ((height / 2) - (h / 2)) + dualScreenTop;
var newWindow = window.open(url, title, _innerOpts + ' width=' + w + ', height=' + h + ', top=' + top + ', left=' + left);
// Puts focus on the newWindow
if (window.focus) {
newWindow.focus();
}
}
用法:
PopupCenter('http://www.google.com','google.com','900','500', {toolbar:1, resizable:1, location:1, menubar:1, status:1});
它也适用于最小化的窗口
上述解决方案均无法正常工作。就精确中心而言,
我试过了,它在 chrome 和 firefox 中对我来说很好用
var sY = screenY;
if (sY < 0) {
sY = 0;
}
var totalScreenWidth = (screenX + window.outerWidth + sY);
if (totalScreenWidth > screen.width) {
totalScreenWidth = totalScreenWidth / 2;
} else {
totalScreenWidth = 0;
}
windowobj.moveTo(totalScreenWidth + ((screen.width - h) / 2), ((screen.height - h) / 2));
但是,如果第二个监视器浏览器在第一次查看一半,在第二次查看另一半,这也会有问题。
由于安全原因,基于 javascript 的解决方案不起作用。
我有另一个想法给你,为什么不使用 chrome 扩展来处理定位。(那里没有安全问题)当然,仅适用于 chrome(也许这对您来说很好)。
背景:我们遇到了相关的困难。在windows中打开多个文档的内部webapp,需要放置在其他显示器中。出于安全原因,javascript 不支持此功能,并且只有本机扩展才能正确处理选项卡/窗口对象。
因此,我们创建了一个开源的 chrome 扩展来做到这一点:跨多显示器设置灵活的窗口位置。
在您的情况下,您可以轻松地为每个监视器定义一个规则,它的显示位置和方式。您可以在 chrome 扩展程序的选项页面中执行此操作。(作为快捷方式,您可以在安装后直接使用)
chrome 扩展名为“MultiWindow Positioner”,并且完全免费。您可以在此处的 chrome 商店购买
您在 github 项目chrome-multiwindow-positioner 中找到的实际源代码
免责声明:我是开源 (MIT) github 项目的维护者。如果有任何有趣的想法或评论,请随时在此处分享。
更新 21/09/2020当我离开那家公司时,我不再是开源项目的维护者。也就是说,我不明白反对票,浏览器不提供 window.APIs 允许您清楚地了解多个监视器,因为它是一个明确的安全限制/违规行为。这就是浏览器插件扩展的帮助所在,因为它们不是网页,它们可以访问允许准确查找/列出监视器和窗口的其他 API。它们遵循不同的安全环境,因此具有额外的权力。并非所有浏览器都提供 require extension.APIs 以支持 mutlmonitor。Mozilla Firefox 大多没有。Chrome 和最新的 MS Edge 是的。经过这么多年的经验,我仍然 100% 没有简单的 javascript 解决方案,唯一的方法是涉及浏览器插件/扩展的解决方案。