如何讓 JavaScript 在當前監視器上打開一個彈出窗口

Question

設想：

1. 用戶有兩個監視器。
2. 他們的瀏覽器在輔助監視器上打開。
3. 他們單擊瀏覽器中的鏈接，該鏈接調用具有特定頂部和左側窗口偏移量的 window.open()。
4. 彈出窗口始終在其主監視器上打開。

JavaScript 中有什么方法可以讓彈出窗口在與初始瀏覽器窗口（打開器）相同的監視器上打開？

Answer 1

您不能指定監視器，但可以將彈出窗口的位置指定為相對於單擊導致窗口彈出的位置。

使用 getMouseXY() 函數獲取要作為 left 和 top args 傳遞給 window.open() 方法的值。 （left 和 top args 僅適用於 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;
}

Answer 2

這是我從 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));

Answer 3

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

Answer 4

在當前顯示器上打開居中的窗口，也可以與 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();
    }
}

Answer 5

我最近遇到了這個問題，終於找到了一種將彈出窗口定位在觸發它的屏幕上的方法。 在我的 github 頁面上查看我的解決方案： https ://github.com/svignara/windowPopUp

訣竅在於使用window.screen對象，該對象返回availWidth 、 availHeight 、 availLeft和availTop值（以及width和height ）。 有關對象中變量的完整列表以及這些變量所代表的含義，請查看https://developer.mozilla.org/en-US/docs/DOM/window.screen 。

本質上，只要單擊彈出窗口的觸發器，我的解決方案就會找到window.screen的值。 這樣我就可以確定從哪個監視器屏幕上單擊它。 該availLeft值負責其余部分。 就是這樣：

基本上，如果左側的第一個可用像素 ( availLeft ) 為負數，則表明“主”監視器左側有一個監視器。 同樣，如果左起第一個可用像素大於 0，則意味着以下兩種情況之一：

1. 監視器位於“主”監視器的右側，或者
2. 屏幕左側有一些“垃圾”（可能是應用程序停靠欄或 Windows 開始菜單）

無論哪種情況，您都希望彈出窗口的偏移量從左側可用像素之后開始。

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

Answer 6

只有 user11153 的版本適用於 Chrome 和雙屏。 這是它的 TypeScript 版本。

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

Answer 7

如果你知道每台顯示器的分辨率，你可以估計這個。 對於公共網站來說這是一個壞主意，但如果您知道（出於某種奇怪的原因）這種情況將始終適用，則可能會有用。

相對於鼠標（如上所述）或相對於原始瀏覽器窗口的位置也可能很有用，盡管您必須假設用戶使用最大化的瀏覽器（這不一定是真的）。

Answer 8

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