如何让JavaScript在当前监视器上打开弹出窗口

场景:

用户有两个显示器.

他们的浏览器在辅助监视器上打开.

他们单击浏览器中的一个链接,该链接使用特定的顶部和左侧窗口偏移调用window.open().

弹出窗口始终在其主监视器上打开.

在JavaScript中是否有任何方法可以让弹出窗口在与初始浏览器窗口(开启者)相同的监视器上打开？

您无法指定监视器,但可以将弹出窗口的位置指定为相对于单击导致窗口弹出的位置.

使用getMouseXY()函数获取要作为window.open()方法的left和top args传递的值.(左侧和顶部的args仅适用于V3和更高版本的浏览器).

window.open docs:http: //www.javascripter.net/faq/openinga.htm

function getMouseXY( e ) {
    if ( event.clientX ) { // Grab the x-y pos.s if browser is IE.
        CurrentLeft = event.clientX + document.body.scrollLeft;
        CurrentTop  = event.clientY + document.body.scrollTop;
    }
    else {  // Grab the x-y pos.s if browser isn't IE.
        CurrentLeft = e.pageX;
        CurrentTop  = e.pageY;
    }  
    if ( CurrentLeft < 0 ) { CurrentLeft = 0; };
    if ( CurrentTop  < 0 ) { CurrentTop  = 0; };  

    return true;
}

这是我从Facebook oauth API无耻地逆向设计的东西.在Firefox/Chrome中的主显示器和辅助显示器上进行测试.

function popup_params(width, height) {
    var a = typeof window.screenX != 'undefined' ? window.screenX : window.screenLeft;
    var i = typeof window.screenY != 'undefined' ? window.screenY : window.screenTop;
    var g = typeof window.outerWidth!='undefined' ? window.outerWidth : document.documentElement.clientWidth;
    var f = typeof window.outerHeight != 'undefined' ? window.outerHeight: (document.documentElement.clientHeight - 22);
    var h = (a < 0) ? window.screen.width + a : a;
    var left = parseInt(h + ((g - width) / 2), 10);
    var top = parseInt(i + ((f-height) / 2.5), 10);
    return ',,left=' + left + ',top=' + top + ',scrollbars=1';
}   

window.open(url, "window name", "location=1,toolbar=0," + popup_params(modal_width, modal_height));

// Pops a window relative to the current window position
function popup(url, winName, xOffset, yOffset) {
  var x = (window.screenX || window.screenLeft || 0) + (xOffset || 0);
  var y = (window.screenY || window.screenTop || 0) + (yOffset || 0);
  return window.open(url, winName, 'top=' +y+ ',left=' +x))
}

像下面这样调用它,它将在当前窗口的顶部打开

popup('http://www.google.com', 'my-win');

或者稍微抵消

popup('http://www.google.com', 'my-win', 30, 30);

关键是window.screenX/screenLeft为您提供与整个桌面相关的位置,而不仅仅是监视器.

window.screen.left将是您提供所需信息的理想候选人.问题是它在页面加载时设置,用户可以将窗口移动到另一个监视器.

更多研究

这个问题的最终解决方案(除了偏离当前窗口位置)需要知道窗口所在的屏幕尺寸.由于屏幕对象不会随着用户移动窗口而更新,我们需要制作我们的自己检测当前屏幕分辨率的方法.这就是我想出来的

/**
 * Finds the screen element for the monitor that the browser window is currently in.
 * This is required because window.screen is the screen that the page was originally
 * loaded in. This method works even after the window has been moved across monitors.
 * 
 * @param {function} cb The function that will be called (asynchronously) once the screen 
 * object has been discovered. It will be passed a single argument, the screen object.
 */
function getScreenProps (cb) {
    if (!window.frames.testiframe) {
      var iframeEl = document.createElement('iframe');
      iframeEl.name = 'testiframe';
      iframeEl.src = "about:blank";
      iframeEl.id = 'iframe-test'
      document.body.appendChild(iframeEl);
    }

    // Callback when the iframe finishes reloading, it will have the 
    // correct screen object
    document.getElementById('iframe-test').onload = function() {
      cb( window.frames.testiframe.screen );
      delete document.getElementById('iframe-test').onload;
    };
    // reload the iframe so that the screen object is reloaded
    window.frames.testiframe.location.reload();
};

因此,如果您想要始终打开窗口所在的任何监视器左上角的窗口,您可以使用以下内容:

function openAtTopLeftOfSameMonitor(url, winName) {
  getScreenProps(function(scr){
    window.open(url, winName, 'top=0,left=' + scr.left);
  })
}