43

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

4

7 に答える 7

19

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;

}
于 2014-04-29T13:10:49.803 に答える
8

関数： 

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

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

于 2015-05-27T16:57:05.243 に答える
2

上記の解決策はどれも正しく機能しません。正確な中心に関して、

私はこれを試しました、それはクロムとファイアフォックスで私にとってはうまくいきます

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 番目に別の半分が表示される場合にも問題があります。

于 2016-05-17T13:57:00.493 に答える
1

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

別のアイデアがあります。配置を処理するためにクロム拡張機能を使用しないでください。（セキュリティ上の問題はありません）もちろん、chrome専用です（おそらくそれで問題ありません）。

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

したがって、まさにそれを行うためのオープンソースのクロム拡張機能を作成しました。それは、マルチモニター設定全体で柔軟なウィンドウ位置を設定できることです。

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

Chrome 拡張機能は「MultiWindow Positioner」と呼ばれ、完全に無料です。こちらのクロムストアで入手できます

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

免責事項: 私はオープン ソース (MIT) github プロジェクトのメンテナーです。興味深いアイデアやコメントがあれば、ここで自由に共有してください。

UPDATE 21/09/2020私はオープンソース プロジェクトのメンテナーではなくなりました。会社を辞めたからです。とはいえ、私は反対票を理解していません。ブラウザーは、明確なセキュリティ制限/違反であるため、複数のモニターを明確に理解できるwindow.APIを提供していません。ブラウザー プラグイン拡張機能は Web ページではないため、モニターやウィンドウを正確に検索/一覧表示できる追加の API にアクセスできます。それらは異なるセキュリティ コンテキストに従うため、追加の権限が与えられます。すべてのブラウザが必要な拡張機能を提供しているわけではありません。mutlmonitor サポート用の API です。Mozilla Firefox はほとんどそうではありません。Chrome と最新の MS Edge はい。長年の経験の後、私はまだ 100% 単純な JavaScript ソリューションはなく、唯一の方法はブラウザーのプラグイン/拡張機能を含むソリューションです。

于 2016-11-23T15:50:19.227 に答える
0 
/**
 * 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);
},
于 2014-09-14T05:41:03.610 に答える