Wie bringe ich JavaScript dazu, ein Popup-Fenster auf dem aktuellen Monitor zu öffnen?

Question

Szenario:

1. Der Benutzer hat zwei Monitore.
2. Ihr Browser ist auf dem zweiten Monitor geöffnet.
3. Sie klicken auf einen Link im Browser, der window.open() mit einem bestimmten Versatz des Fensters nach oben und links aufruft.
4. Das Popup-Fenster wird immer auf dem Hauptmonitor geöffnet.

Gibt es eine Möglichkeit, in JavaScript das Popup-Fenster auf demselben Monitor zu öffnen wie das ursprüngliche Browser-Fenster (der Opener)?

Answer 1

Sie können den Monitor nicht angeben, aber Sie können die Position des Popup-Fensters relativ zu der Stelle angeben, an der der Klick das Fenster geöffnet hat.

Verwenden Sie die Funktion getMouseXY(), um Werte zu erhalten, die als linke und obere Argumente an die Methode window.open() übergeben werden. (die linken und oberen Args funktionieren nur bei Browsern ab V3).

window.open docs: 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

Hier ist etwas, das ich schamlos von der Facebook oauth API zurückentwickelt habe. Getestet auf einem primären und sekundären Monitor in 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))
}

Rufen Sie es wie folgt auf und es wird über dem aktuellen Fenster geöffnet

popup('http://www.google.com', 'my-win');

Oder machen Sie es leicht versetzt

popup('http://www.google.com', 'my-win', 30, 30);

Der Punkt ist, dass window.screenX/screenLeft Ihnen die Position in Bezug auf den gesamten Desktop, nicht nur den Monitor, gibt.

window.screen.left wäre der ideale Kandidat, um Ihnen die benötigten Informationen zu liefern. Das Problem ist, dass es gesetzt wird, wenn die Seite geladen wird und der Benutzer das Fenster auf den anderen Monitor verschieben könnte.

Mehr Forschung

Eine endgültige Lösung für dieses Problem (abgesehen von der Verschiebung von der aktuellen Fensterposition) erfordert die Kenntnis der Abmessungen des Bildschirms, in dem sich das Fenster befindet. Da das Bildschirmobjekt nicht aktualisiert wird, wenn der Benutzer ein Fenster verschiebt, müssen wir einen eigenen Weg finden, um die aktuelle Bildschirmauflösung zu ermitteln. Das habe ich mir ausgedacht

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

Wenn Sie also möchten, dass das Fenster immer oben links auf dem Monitor geöffnet wird, auf dem es sich befindet, könnten Sie Folgendes verwenden:

function openAtTopLeftOfSameMonitor(url, winName) {
  getScreenProps(function(scr){
    window.open(url, winName, 'top=0,left=' + scr.left);
  })
}

Answer 4

Zentriertes Fenster auf dem aktuellen Monitor öffnen, funktioniert auch mit 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

Ich bin kürzlich auf dieses Problem gestoßen und habe schließlich einen Weg gefunden, das Popup-Fenster auf dem Bildschirm zu positionieren, von dem aus es ausgelöst wird. Werfen Sie einen Blick auf meine Lösung auf meiner Github-Seite hier: https://github.com/svignara/windowPopUp

Der Trick besteht in der Verwendung der window.screen Objekt, das Folgendes zurückgibt availWidth , availHeight , availLeft y availTop Werte (wie auch width y height ). Eine vollständige Liste der Variablen des Objekts und ihrer Bedeutung finden Sie unter https://developer.mozilla.org/en-US/docs/DOM/window.screen .

Im Wesentlichen findet meine Lösung die Werte der window.screen wenn der Auslöser für das Popup angeklickt wird. Auf diese Weise weiß ich mit Sicherheit, von welchem Bildschirm aus es angeklickt wird. Die availLeft Wert sorgt für den Rest. Und so geht's:

Grundsätzlich gilt: Wenn das erste verfügbare Pixel von links ( availLeft ) negativ ist, bedeutet dies, dass es links vom "Hauptmonitor" einen Monitor gibt. Wenn das erste verfügbare Pixel von links größer als 0 ist, bedeutet dies eines von 2 Dingen:

1. Der Monitor befindet sich rechts vom "Haupt"-Monitor, ODER
2. Auf der linken Seite des Bildschirms befindet sich etwas "Müll" (möglicherweise das Anwendungsdock oder das Windows-Startmenü)

In jedem Fall soll der Versatz des Popups nach dem verfügbaren Pixel von links beginnen.

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