使用 JavaScript 在第二个屏幕中打开屏幕弹出窗口

Question

我想使用 Javascript 在第二个屏幕上打开我的应用程序页面。我从这个 question 的一个答案中得到了一个例子。该示例运行良好，如果我在右侧屏幕上有我的父应用程序，它会在左侧打开 window。但如果我的父屏幕在左屏幕上，它就不起作用。

我想要的是，我想打开其他屏幕上的window到我的父页面屏幕。这就是这个例子的样子。

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;

       console.log('dualScreenLeft' + dualScreenLeft); 
       console.log('dualScreenTop' + dualScreenTop); 

       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;

       console.log('wigth' + width); 
       console.log('height' + height); 

       var left = ((width / 2) - (w / 2)) + dualScreenLeft;
       var top = ((height / 2) - (h / 2)) + dualScreenTop;

       console.log('calculated left ' + left); 
       console.log('calcualted top ' + top); 


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

我应该在我的代码中更改什么，以便它自动检测屏幕并在另一个屏幕上打开 window。

我正在 Firefox 和 IE (11) 上尝试此操作。

Answer 1

请看下图，在multi-monitor/screen环境下，副屏元素位置为(1920,0)的开始（假设屏幕分辨率为1920*1080）。

// X,Y                  X,Y                    S = Screen, W = Window
// 0,0  ----------   1920,0  ----------
//     |          |         |  ---     |
//     |          |         | | W |    |
//     |        S |         |  ---   S |

所以，我们可以先获取父window位置，然后与屏幕宽度进行比较，检测它是位于第一屏还是第二屏，然后，当我们打开弹窗时window, 我们可以将 window 设置为左属性并在另一个屏幕中打开它。

请参考以下代码：

<script type="text/javascript">
function OpenWindow() {
    PopupCenter("https://www.google.com/", "Google", 900, 500, null);
}
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] + ',';
           }
       }
    }
    //get the screen width and height.
    var screenwidth = window.screen.width;
    var screenheight = window.screen.height;
    console.log("screen width: " + screenwidth);
    console.log("screen height: " + screenheight);

   //get current window position. For Firefox, use ["window.screenX"](https://www.w3schools.com/jsref/prop_win_screenx.asp) and ["window.screenY"](https://www.w3schools.com/jsref/prop_win_screenx.asp) 
   // 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;
   console.log('dualScreenLeft' + dualScreenLeft); 
    console.log('dualScreenTop' + dualScreenTop); 

   //get current window width and height
   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;
   console.log('current window wigth:' + width); 
   console.log('current window height:' + height); 

   var left = 0;
   var top = 0;
   console.log('calculated left ' + left); 
   console.log('calcualted top ' + top); 
    //if parent window located in the second screen. set the popup window left property: from 0 to 1920 (the first screen width)
    if (dualScreenLeft >= 1920) {
        left = 0;
    }
    else {
        //
        left = 1920;
    }
   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();
   }
};
</script>
<input type="button" value="Open window" onclick="OpenWindow();" />

使用 JavaScript 在第二个屏幕中打开屏幕弹出窗口

Open a screen popup in second screen using JavaScript

javascript

internet-explorer

firefox

window.open