Question

我想使用Javascript在第二个屏幕上打开我的应用程序页面。我从对此question的答案之一中得到了一个例子。该示例运行良好，如果我的父应用程序在右侧屏幕上，则它将打开左侧的窗口。但是，如果我的父屏幕在左侧屏幕上，则无法使用。

我想要的是，我想在其他屏幕上打开到父页面屏幕的窗口。这是示例的样子。

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

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

我正在Firefox和IE（11）上尝试此操作。

Answer 1

请检查下图，在多监视器/屏幕环境中，第二个屏幕中的元素位置是（1920,0）的开头（假设屏幕分辨率为1920 * 1080）。

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

因此，我们可以先获取父窗口的位置，然后将其与屏幕宽度进行比较并检测它位于第一屏幕还是第二屏幕上，然后，当我们打开弹出窗口时，可以将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在第二个屏幕中打开一个屏幕弹出窗口

1 个答案: