多显示器/双显示器系统上的 window.open() - 窗口在哪里弹出?

IT技术 javascript popup window window.open multiple-monitors
2021-03-15 02:46:34

在多显示器系统上使用 javascript window.open() 时,如何控制弹出窗口打开的显示器或显示空间中的哪个位置?这对我来说似乎失控了,否则它的行为是随机的。

6个回答

“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链接

阅读他发布的回溯链接中的文档。
2021-04-21 02:46:34
这一切都非常花哨,我喜欢它。但为什么不直接使用 window.screenX 呢?
2021-05-01 02:46:34
您的代码是 returnign 'window.leftWindowBoundry is not a function'我正在尝试使用 chrome 63.0.3239.132。
2021-05-02 02:46:34

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;

}
会不会screenX对监视器2是1361
2021-04-26 02:46:34
@Heroic:不,没有为 Chrome 找到任何解决方案。答案中提到的解决方案适用于 FF,但出于安全考虑,Chrome 不允许以这种方式放置弹出窗口。我当时通过官方 Chrome 线程确认了这一点。该网址目前不方便。
2021-04-29 02:46:34
@RumitParakhiya 你有什么解决办法吗?我遇到了同样的问题,它在 firefox 上工作,但在 chrome 上没有
2021-05-11 02:46:34
我正在尝试使用这种技术解决在另一台显示器上放置弹出窗口的问题。它在 Firefox 和 IE 中按预期工作。但在 chrome 中,它不起作用。它的放置弹出窗口位于窗口的右边缘。任何的想法?
2021-05-14 02:46:34

功能:

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}); 

它也适用于最小化的窗口

这很好用!不过我想要左上角,所以我只是夸大了第一个宽度和高度的划分,然后将第二个(w 和 h)划分为 1。从来不明白 'google.com' 的功能在用法中是什么,却发现它可以是任何东西,只要它是任何东西。
2021-04-24 02:46:34
@drymoon 你知道为什么这会在同一个窗口中打开每个链接而不是一个新链接吗?真烦人/:
2021-04-26 02:46:34
@dryymoon 对我来说这总是在同一屏幕上打开窗口。如何在其他屏幕上打开它?
2021-05-05 02:46:34
似乎它仅适用于具有相同核心 URL 的链接。
2021-05-08 02:46:34
@drymoon 的第二个参数window.open()被称为windowName这不会用作窗口的显示标题,而是像targeteg属性一样工作<a> 元素。(请参阅developer.mozilla.org/en-US/docs/Web/API/Window/open)如果设置为_blank(或在第二个参数上使用“_blank”调用 PopupCenter,将始终打开一个新窗口。
2021-05-16 02:46:34

上述解决方案均无法正常工作。就精确中心而言,

我试过了,它在 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 解决方案,唯一的方法是涉及浏览器插件/扩展的解决方案。

而且,根据个人经验,我可以给出反馈,即我工作的公司中有很多人没有这个扩展就活不下去了。对于基于浏览器的应用程序的高级用户和开发人员来说,它确实让生活变得更加轻松。我收到了将它移植到其他浏览器的请求,但这是不可能的,因为 FF 或 IE 没有所需的接口:(
2021-04-18 02:46:34
“为什么不使用 chrome 扩展程序”...嗯,因为要求我们网站的随机访问者安装扩展程序只是为了定位弹出窗口听起来并不理想。
2021-05-05 02:46:34
是的,从这个意义上说,那不行。这实际上是一个灰色地带。基于浏览器的应用程序需要越来越多的功能,想要进入浏览器选项卡的范围,而浏览器必须保护用户免受安全问题的影响。它是一个矛盾。
2021-05-10 02:46:34