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

情景：

用户有两个监视器

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

他们在浏览器中单击一个链接，该链接调用window.open（），具有特定的顶部和左侧窗口偏移

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

---

JavaScript中是否有任何方法可以使弹出窗口在与初始浏览器窗口（打开器）相同的监视器上打开？

只要知道落在特定监视器上的x和y位置，就可以执行以下操作：

var x = 0;
var y = 0;
var myWin = window.open(''+self.location,'mywin','left='+x+',top='+y+',width=500,height=500,toolbar=1,resizable=0');

---

您不能指定监视器，但可以指定弹出窗口的位置，即相对于单击导致窗口弹出的位置

使用getMouseXY（）函数获取要作为左参数和顶参数传递给window.open（）方法的值。（左侧和顶部参数仅适用于V3及以上浏览器）

window.open文档：

函数getMouseXY（e）{ 如果（event.clientX）{//如果浏览器是IE，则抓取x-y位置。 CurrentLeft=event.clientX+document.body.scrollLeft； CurrentTop=event.clientY+document.body.scrollTop； } 否则{//如果浏览器不是IE，请抓取x-y位置。 CurrentLeft=e.pageX； CurrentTop=e.pageY； } 如果（CurrentLeft<0）{CurrentLeft=0；}； 如果（CurrentTop<0）{CurrentTop=0；}； 返回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 'width=' + width + ',height=' + height + ',left=' + left + ',top=' + top + ',scrollbars=1';
}   

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

功能弹出参数（宽度、高度）{
变量a=typeof window.screenX！=“未定义”？window.screenX:window.screenLeft；
变量i=typeof window.screenY！=“未定义”？window.screenY:window.screenTop；
var g=窗口的类型。outerWidth！=“未定义”？window.outerWidth:document.documentElement.clientWidth；
var f=typeof window.outerHeight！=“未定义”？window.outerHeight:（document.documentElement.clientHeight-22）；
var h=（a<0）？window.screen.width+a:a；
var left=parseInt（h+（（g-宽度）/2），10）；
var-top=parseInt（i+（（f-height）/2.5），10）；
返回'width='+width+'，height='+height+'，left='+left+'，top='+top+'，滚动条=1'；
}   
打开（url，“窗口名称”，“位置=1，工具栏=0，”+弹出参数（模式宽度，模式高度））；

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

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

---

我最近遇到了这个问题，最终找到了一种方法，可以在屏幕上定位弹出窗口，并从中触发它。请在我的github页面上查看我的解决方案：

诀窍在于使用

window.screen

对象，该对象返回

可用宽度

，

可用高度

，

可用高度

和

可用高度

值（以及

宽度

和

高度

）。有关对象中变量的完整列表以及这些变量表示的内容，请参见

基本上，每当单击弹出窗口的触发器时，我的解决方案都会找到

window.screen

的值。这样我就可以确定它是从哪个显示器屏幕被点击的。

availLeft

值处理其余部分。以下是方法：

基本上，如果左侧的第一个可用像素（

availLeft

）为负数，则表示“主”监视器的左侧有一个监视器。类似地，如果从左侧开始的第一个可用像素大于0，这意味着两件事之一：

监视器位于“主”监视器的右侧，或

屏幕左侧有一些“垃圾”（可能是应用程序驳接或windows开始菜单）

无论哪种情况，您都希望弹出窗口的偏移量从左侧可用像素之后开始

offsetLeft = availableLeft + ( (availableWidth - modalWidth) / 2 )

---

打开当前监视器上的居中窗口，同时使用Chrome：

function popupOnCurrentScreenCenter(url, title, w, h) {
    var dualScreenLeft = typeof window.screenLeft !== "undefined" ? window.screenLeft : screen.left;
    var dualScreenTop = typeof 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, 'scrollbars=yes, width=' + w + ', height=' + h + ', top=' + top + ', left=' + left);

    // Puts focus on the newWindow
    if (window.focus) {
        newWindow.focus();
    }
}

---

只有user11153的版本可以与Chrome和双屏兼容。这是它的打字脚本版本

popupOnCurrentScreenCenter(url: string, title: string, w: number, h: number): Window|null {
    var dualScreenLeft = typeof window.screenLeft !== "undefined" ? window.screenLeft : (<any>screen).left;
    var dualScreenTop = typeof window.screenTop !== "undefined" ? window.screenTop : (<any>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, 'scrollbars=yes, width=' + w + ', height=' + h + ', top=' + top + ', left=' + left);

    // Puts focus on the newWindow
    if (window.focus && newWindow) {
        newWindow.focus();
    }
    return newWindow;
}

popupOnCurrentScreenCenter（url:string，title:string，w:number，h:number）：窗口|空{
var dualScreenLeft=typeof window.screenLeft！=“未定义”？window.screenLeft：（screen）.left；
var dualScreenTop=typeof window.screenTop！=“未定义”？window.screenTop：（screen.top）；
变量宽度=window.innerWidth？window.innerWidth：
document.documentElement.clientWidth？document.documentElement.clientWidth:screen.width；
变量高度=window.innerHeight？window.innerHeight：
document.documentElement.clientHeight？document.documentElement.clientHeight：screen.height；
变量左=（（宽度/2）-（宽度/2））+dualScreenLeft
function popupOnCurrentScreenCenter(url, title, w, h) {
    var dualScreenLeft = typeof window.screenLeft !== "undefined" ? window.screenLeft : screen.left;
    var dualScreenTop = typeof 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, 'scrollbars=yes, width=' + w + ', height=' + h + ', top=' + top + ', left=' + left);

    // Puts focus on the newWindow
    if (window.focus) {
        newWindow.focus();
    }
}

popupOnCurrentScreenCenter(url: string, title: string, w: number, h: number): Window|null {
    var dualScreenLeft = typeof window.screenLeft !== "undefined" ? window.screenLeft : (<any>screen).left;
    var dualScreenTop = typeof window.screenTop !== "undefined" ? window.screenTop : (<any>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, 'scrollbars=yes, width=' + w + ', height=' + h + ', top=' + top + ', left=' + left);

    // Puts focus on the newWindow
    if (window.focus && newWindow) {
        newWindow.focus();
    }
    return newWindow;
}