22

シナリオ：

  1. ユーザーには 2 つのモニターがあります。
  2. ブラウザはセカンダリ モニタで開いています。
  3. 特定の上部と左側のウィンドウ オフセットで window.open() を呼び出すブラウザのリンクをクリックします。
  4. ポップアップ ウィンドウは常にプライマリ モニターで開きます。

JavaScript でポップアップ ウィンドウを最初のブラウザ ウィンドウ (オープナー) と同じモニターで開く方法はありますか?

4

8 に答える 8

22

モニターを指定することはできませんが、ポップアップ ウィンドウの位置は、クリックによってウィンドウがポップアップした場所に対する相対位置として指定できます。

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;
}
于 2008-09-11T21:15:08.983 に答える
19

これは、私が厚かましくも 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));
于 2011-01-13T16:11:02.027 に答える
7 
// 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);
  })
}
于 2011-01-24T20:46:10.190 に答える
0

私は最近この問題に遭遇し、最終的にポップアップ ウィンドウをトリガー元の画面に配置する方法を見つけました。こちらの github ページで私のソリューションをご覧ください: https://github.com/svignara/windowPopUp

トリックは、 、、および値 (および と)window.screenを返すオブジェクトを使用することです。オブジェクト内の変数の完全なリストと、これらの変数が何を表しているかについては、https://developer.mozilla.org/en-US/docs/DOM/window.screenを参照してください。availWidthavailHeightavailLeftavailTopwidthheight

window.screen基本的に、私のソリューションは、ポップアップのトリガーがクリックされるたびにの値を見つけます。このようにして、どのモニター画面からクリックされているかを確実に知ることができます。availLeft残りは値によって処理されます。方法は次のとおりです。

基本的に、左からの最初の利用可能なピクセル ( availLeft) が負の場合、それは「メイン」モニターの左側にモニターがあることを示しています。同様に、左から最初に使用可能なピクセルが 0 より大きい場合、これは次の 2 つのいずれかを意味します。

  1. モニターが「メイン」モニターの右側にある、または
  2. 画面の左側に「がらくた」があります (アプリケーション ドックまたは Windows スタート メニューの可能性があります)。

どちらの場合も、ポップアップのオフセットを左から利用可能なピクセルの後から開始する必要があります。

offsetLeft = availableLeft + ( (availableWidth - modalWidth) / 2 )
于 2013-01-12T04:35:01.107 に答える
0

各モニターの解像度がわかっている場合は、これを推定できます。公開 Web サイトとしては悪い考えですが、(何らかの奇妙な理由で) このシナリオが常に適用されることがわかっている場合に役立つ可能性があります。

マウス (上記のように) または元のブラウザー ウィンドウとの相対位置も役立つ場合がありますが、ユーザーがブラウザーを最大化して使用していると想定する必要があります (これは必ずしも真実ではありません)。

于 2009-06-14T20:47:22.497 に答える
-3

特定のモニターに該当する 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');
于 2008-09-11T21:14:08.440 に答える