web-dev-qa-db-ja.com

マルチモニター/デュアルモニターシステム上のwindow.open（）-ウィンドウはどこにポップアップしますか？

マルチモニターシステムでjavascript window.open（）を使用する場合、どのモニター、またはポップアップが表示スペースのどこで開くかをどのように制御しますか？それは私には制御不能であり、そうでなければその動作はランダムに見えます。

javascriptpopupwindowwindow.openmultiple-monitors
34
Bob Brunius

「window.open dual-screen」検索の結果は、この派手なナゲットを明らかにしました： Dual Monitors and Window.open

「ユーザーがwindow.openを使用して新しいウィンドウを開くリンクをクリックすると、ウィンドウがその親と同じモニターに表示されます。」

// Find Left Boundry of the Screen/Monitor
function FindLeftScreenBoundry()
{
    // Check if the window is off the primary monitor in a positive axis
    // X,Y                  X,Y                    S = Screen, W = Window
    // 0,0  ----------   1280,0  ----------
    //     |          |         |  ---     |
    //     |          |         | | W |    |
    //     |        S |         |  ---   S |
    //      ----------           ----------
    if (window.leftWindowBoundry() > window.screen.width)
    {
        return window.leftWindowBoundry() - (window.leftWindowBoundry() - window.screen.width);
    }

    // Check if the window is off the primary monitor in a negative axis
    // X,Y                  X,Y                    S = Screen, W = Window
    // 0,0  ----------  -1280,0  ----------
    //     |          |         |  ---     |
    //     |          |         | | W |    |
    //     |        S |         |  ---   S |
    //      ----------           ----------
    // This only works in Firefox at the moment due to a bug in Internet Explorer opening new windows into a negative axis
    // However, you can move opened windows into a negative axis as a workaround
    if (window.leftWindowBoundry() < 0 && window.leftWindowBoundry() > (window.screen.width * -1))
    {
        return (window.screen.width * -1);
    }

    // If neither of the above, the monitor is on the primary monitor whose's screen X should be 0
    return 0;
}

window.leftScreenBoundry = FindLeftScreenBoundry;

これでコードが作成されたので、window.openを使用して、親ウィンドウがオンになっているモニターでウィンドウを開くことができます。

window.open(thePage, 'windowName', 'resizable=1, scrollbars=1, fullscreen=0, height=200, width=650, screenX=' + window.leftScreenBoundry() + ' , left=' + window.leftScreenBoundry() + ', toolbar=0, menubar=0, status=1');

起動したドキュメントと同じ画面でポップアップを正常に開くことができた場合、同様の努力でそれを変更して異なる動作をすることができるはずです。

コードの長さが意味するように、jquery/javascript/browsersの複数のモニターを理解するための組み込み関数はありません。デュアルスクリーンデスクトップは、2つの個別の平面ではなく、単純に拡大された単一デカルト平面であることに注意してください。

更新

リンクは無効です。 this waybackmachine link を使用します

18
BrianH

window.screenXは、現在のモニター画面の位置を示します。

モニター幅が1360であるとします

モニター1 window.screenX = 0;

モニター2 window.screenX = 1360;

そのため、window.screenXで左の位置を追加することにより、期待される位置でポップアップが開きます。

function openWindow() {

    var width = 650;
    var left = 200;

    left += window.screenX;

    window.open(thePage,'windowName','resizable=1,scrollbars=1,fullscreen=0,height=200,width=' + width + '  , left=' + left + ', toolbar=0, menubar=0,status=1');    
    return 0;

}
13
Ravikumar GH

関数：

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;

   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, _innerOpts + ' width=' + w + ', height=' + h + ', top=' + top + ', left=' + left);

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

使用法：

PopupCenter('http://www.google.com','google.com','900','500', {toolbar:1, resizable:1, location:1, menubar:1, status:1});

最小化されたウィンドウでも動作します

8
dryymoon

セキュリティ上の理由により、javascriptベースのソリューションは機能しません。

私はあなたのために別のアイデアを持っています、なぜポジショニングを処理するためにchrome拡張機能を使用しないでください。（そこにセキュリティ上の問題はありません））.

背景：関連する困難がありました。 Windowsで複数のドキュメントを開く内部Webアプリ。他のモニターに配置する必要があります。セキュリティ上の理由から、javascriptはこれをサポートしておらず、ネイティブ拡張のみがタブ/ウィンドウオブジェクトを適切に操作できます。

したがって、オープンソースchrome拡張機能を作成しました。正確にそれを行うために：マルチモニター設定全体での柔軟なウィンドウの配置。

あなたの場合、それがどこでどのように表示されるかをモニターごとに簡単に定義できます。 chrome拡張機能のオプションページで行うことができます。（ショートカットとして、インストール後、直接そこに行くことができます sing ）

chrome拡張機能は「MultiWindow Positioner」と呼ばれ、完全に無料です。chrome store here

プロジェクトのgithubにある実際のソースコード chrome-multiwindow-positioner

免責事項：私はオープンソース（MIT）githubプロジェクトのメンテナーです。何か面白いアイデアやコメントがあれば、気軽に共有してください here 。

2
Igor Lino

上記のソリューションはどれも正しく動作しません。正確なセンターに関しては、

私はこれを試しましたが、chrome and firefox

var sY = screenY;
        if (sY < 0) {
            sY = 0;
        }
        var totalScreenWidth = (screenX + window.outerWidth + sY);
        if (totalScreenWidth > screen.width) {
            totalScreenWidth = totalScreenWidth / 2;
        } else {
            totalScreenWidth = 0;
        }
        windowobj.moveTo(totalScreenWidth + ((screen.width - h) / 2), ((screen.height - h) / 2));

しかし、これは、2番目のモニターのブラウザーの半分が最初に表示され、もう半分が2番目に表示される場合にも問題があります。

2
vimal prakash
/**
 * Display popup window in the center of the screen.
 */
function popupWindow(url, title, w, h) {
  // Use window.screenX to center the window horizontally on multi-monitor 
  // setup. 
  var left = window.screenX + (screen.width / 2) - (w / 2);
  var top = (screen.height / 2) - (h / 2);
  return window.open(url, title, 'toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=no, resizable=yes, copyhistory=no, width=' + w + ', height=' + h + ', top=' + top + ', left=' + left);
},
0
Alex Skrypnyk