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

Bob*_*ius 35 javascript multiple-monitors window popup window.open

在多监视器系统上使用javascript window.open()时,如何控制弹出窗口打开哪个监视器或显示空间中的哪个位置?对我来说似乎失去了控制,而且其行为也是随意的.

Bri*_*anH 18

"window.open双屏"搜索的结果显示了这个花哨的金块:Dual Monitors和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;
Run Code Online (Sandbox Code Playgroud)

现在编写了代码,您现在可以使用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');
Run Code Online (Sandbox Code Playgroud)

如果它成功允许您在启动它的文档的同一屏幕上打开弹出窗口,那么通过类似的努力,应该能够修改它以表现不同.

请注意,正如代码长度所暗示的那样,没有用于理解jquery/javascript/browsers中多个监视器的内置函数,只有双屏桌面只是一个放大的单个笛卡尔平面而不是两个离散平面.

更新

链接已经死了.使用此waybackmachine链接


小智 15

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;

}
Run Code Online (Sandbox Code Playgroud)

  • 我正在尝试使用此技术解决在另一台显示器上放置弹出窗口的问题.它在firefox和IE中正如预期的那样工作.但在Chrome中,它不起作用.它在窗口的右边缘放置弹出窗口.任何的想法? (2认同)

dry*_*oon 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();
   }
}
Run Code Online (Sandbox Code Playgroud)

用法:

PopupCenter('http://www.google.com','google.com','900','500', {toolbar:1, resizable:1, location:1, menubar:1, status:1}); 
Run Code Online (Sandbox Code Playgroud)

它也适用于最小化的窗口

  • @drymoon `window.open()` 的第二个参数称为 `windowName`。这不会用作窗口的显示标题,而是像例如的“target”属性一样工作。&lt;a&gt; 元素。(参见 https://developer.mozilla.org/en-US/docs/Web/API/Window/open)如果设置为 `_blank` (或者在第二个参数上使用 '_blank' 调用 PopupCenter,则会出现一个新窗口会一直打开。 (2认同)