43

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

4

7 回答 7

22

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

于 2013-05-03T16:43:52.067 回答
19

window.screenX将给出当前监视器屏幕的位置。

假设显示器宽度为 1360

用于监视器 1window.screenX = 0;

用于显示器 2window.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;

}
于 2014-04-29T13:10:49.803 回答
8

功能： 

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

它也适用于最小化的窗口

于 2015-05-27T16:57:05.243 回答
2

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

我试过这个，它在 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));

但是，如果第二个监视器浏览器在第一和第二个中被查看一半，这也有问题。

于 2016-05-17T13:57:00.493 回答
1

由于安全原因，基于 javascript 的解决方案不起作用。

我对你有另一个想法，为什么不使用 chrome 扩展来处理定位。（那里没有安全问题）当然，只适用于chrome（也许这对你来说很好）。

背景：我们遇到了相关的困难。在 windows 中打开多个文档的内部 webapp，需要放置在其他监视器中。出于安全原因，javascript 不支持这一点，并且只有本机扩展才能正确使用选项卡/窗口对象。

因此，我们为此创建了一个开源 chrome 扩展：跨多显示器设置的灵活窗口位置。

在您的情况下，您可以轻松地为每个监视器定义一条规则，它会出现在哪里以及如何出现。您可以在 chrome 扩展的选项页面中执行此操作。（作为快捷方式，安装后，直接使用）

chrome 扩展名为“MultiWindow Positioner”，完全免费。你可以在这里的 chrome 商店买到

您在项目chrome-multiwindow-positioner的 github 中找到的实际源代码

免责声明：我是开源 (MIT) github 项目的维护者。如果有任何有趣的想法或评论，请随时在这里分享。

更新 21/09/2020离开那家公司后，我不再是开源项目的维护者。也就是说，我不理解反对意见，浏览器不提供 window.API 让您清楚地了解多个监视器，因为它明显的安全限制/违规。这就是浏览器插件扩展有帮助的地方，因为它们不是一个网页，它们可以访问额外的 API，这些 API 允许准确地查找/列出监视器和窗口。它们遵循不同的安全上下文，因此具有额外的权力。并不是所有的浏览器都提供了需要扩展的 API 来支持多监视器。Mozilla Firefox 大多没有。Chrome 和最新的 MS Edge 是的。经过这么多年的经验，我仍然 100% 没有纯 JavaScript 解决方案，唯一的方法是涉及浏览器插件/扩展的解决方案。

于 2016-11-23T15:50:19.227 回答
0 
/**
 * Display popup window in the center of the screen.
 */
function popupWindow(url, title, w, h) {
  // Use window.screenX to center the window horizontally on multi-monitor 
  // setup. 
  var left = window.screenX + (screen.width / 2) - (w / 2);
  var top = (screen.height / 2) - (h / 2);
  return window.open(url, title, 'toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=no, resizable=yes, copyhistory=no, width=' + w + ', height=' + h + ', top=' + top + ', left=' + left);
},
于 2014-09-14T05:41:03.610 回答
0

这是一个解决方案：

function openWindow( url, winnm, options)
{
    var wLeft = parseInt( typeof window.screenX != 'undefined' ? window.screenX : window.screenLeft );

    var left = 0;

    if( (result = /left=(\d+)/g.exec(options)) ) {
        left = parseInt(result[1]);
    }

    if(options)
    {
       options = options.replace("left="+left,"left="+(parseInt(left) + wLeft));        
       w = window.open( url, winnm, options );
    }
    else
    {
       w = window.open( url, winnm );
    }

    if(w)
         w.focus();

    return w;
}

你只需要在你的 js 文件中替换： window.open 到 openWindow

于 2019-11-24T18:56:36.683 回答