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

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

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

window.open文档: 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 '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));

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

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

如果 对于一个公共网站来说,这是一个坏主意,但如果你知道(出于某种奇怪的原因)这种情况总是适用的话,这可能会很有用。

相对于鼠标(如上所述)或原始浏览器窗口的相对位置也可能有用,不过您必须假设用户使用的浏览器最大化(这不一定是真的)。

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

window.screen 对象,返回 availWidth availHeight , availLeft 和 availTop width 和 height )。有关对象中变量的完整列表以及这些变量表示的内容,请参见 https://developer.mozilla.org/en-US/docs/DOM/window.screen .

窗纱 每当单击弹出窗口的触发器时。这样我就可以确定它是从哪个显示器屏幕被点击的。这个 有效

基本上如果第一个可用的像素从左边开始( 有效 )是否定的,这告诉我们在“主”监视器的左边有一个监视器。类似地,如果从左侧开始的第一个可用像素大于0,这意味着两件事之一:

1. 监视器位于“主”监视器的右侧,或
2. 屏幕左侧有一些“垃圾”(可能是应用程序驳接或windows开始菜单)

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

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

只要您知道落在特定监视器上的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');