window.open() auf einem Multi-Monitor/Dual-Monitor-System – wo erscheint das Fenster?

Lesezeit: 10 Minuten

Wenn Sie javascript window.open() auf einem System mit mehreren Monitoren verwenden, wie steuern Sie, welcher Monitor oder wo im Anzeigebereich das Popup geöffnet wird? Es scheint mir außer Kontrolle geraten und ansonsten zufällig in seinem Verhalten zu sein.

  • Keine der folgenden Antworten beantwortet den Teil der Frage “Wie steuern Sie welchen Monitor?” richtig. siehe zB fehlende Antwort für webmasters.stackexchange.com/questions/103269/…

    – Wolfgang Fahl

    31. Juli 2019 um 16:08 Uhr


  • siehe stackoverflow.com/a/57303963/1497139 für einen alternativen Ansatz zum Öffnen des Vollbildmodus auf einem bestimmten Monitor.

    – Wolfgang Fahl

    1. August 2019 um 7:39 Uhr

Benutzer-Avatar
BrianH

Das Ergebnis der Suche nach “window.open dual-screen” ergab dieses schicke Nugget: Zwei Monitore und Fenster.öffnen

“Wenn der Benutzer auf einen Link klickt, der ein neues Fenster mit window.open öffnet. Lassen Sie das Fenster auf demselben Monitor wie sein übergeordnetes Fenster erscheinen.”

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

Nachdem der Code geschrieben ist, können Sie jetzt window.open verwenden, um ein Fenster auf dem Monitor zu öffnen, auf dem sich das übergeordnete Fenster befindet.

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

Wenn es Ihnen erfolgreich erlaubt, ein Popup auf demselben Bildschirm wie das Dokument zu öffnen, das es startet, dann sollte es mit ähnlichem Aufwand möglich sein, es so zu ändern, dass es sich anders verhält.

Beachten Sie, dass es, wie die Länge des Codes andeutet, keine integrierte Funktion zum Verständnis mehrerer Monitore in jquery/javascript/browsers gibt, nur dass der Desktop mit zwei Bildschirmen einfach eine vergrößerte einzelne kartesische Ebene anstelle von zwei diskreten Ebenen ist.

Aktualisieren

Der Link ist tot. Verwenden dieser Waybackmachine-Link

  • Ihr Code kehrt zurück ‘window.leftWindowBoundry ist keine Funktion’. Ich versuche es in Chrom 63.0.3239.132.

    – Chadim Ali

    2. Februar 2018 um 17:13 Uhr


  • Lesen Sie das Dokument unter dem Wayback-Link, den er gepostet hat.

    – Brannt

    15. Juli 2019 um 18:58 Uhr

  • Das ist alles sehr schick, und ich mag es. Aber warum nicht einfach window.screenX verwenden?

    – Jomofrodo

    18. Dezember 2019 um 19:34 Uhr

Benutzer-Avatar
Ravikumar GH

window.screenX gibt die Position des aktuellen Monitorbildschirms an.

Angenommen, die Monitorbreite beträgt 1360

für Monitor 1 window.screenX = 0;

für Monitor 2 window.screenX = 1360;

also durch Hinzufügen der linken Position mit window.screenXPopup an erwarteter Position geöffnet.

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;

}

  • Ich versuche, das Platzieren von Popups auf einem anderen Monitor mit dieser Technik zu lösen. Es funktioniert wie erwartet in Firefox und IE. Aber in Chrom funktioniert es nicht. Sein Platzierungs-Popup am rechten Rand des Fensters. Irgendeine Idee?

    – Rumit Parakhiya

    12. Januar 2015 um 9:14 Uhr


  • @RumitParakhiya hast du eine Lösung? Ich habe das gleiche Problem, es funktioniert auf Firefox, aber nicht in Chrome

    – Heroisch

    12. April 2016 um 5:57 Uhr

  • @Heroic: Nein, ich habe keine Lösung für Chrome erhalten. Die in der Antwort erwähnte Lösung funktioniert auf FF, aber Chrome erlaubt es aus Sicherheitsgründen nicht, Popups auf diese Weise zu platzieren. Ich bin damals durch einen offiziellen Chrome-Thread gekommen, der dies bestätigt hat. Die URL ist zu diesem Zeitpunkt nicht praktisch.

    – Rumit Parakhiya

    12. April 2016 um 6:01 Uhr

  • Würde nicht screenX für Monitor 2 sein 1361?

    – Scott Marcus

    7. November 2017 um 20:13 Uhr

Benutzer-Avatar
Trockenmond

FUNKTION:

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

VERWENDUNGSZWECK:

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

Es funktioniert auch bei minimierten Fenstern

  • Das hat super funktioniert! Ich wollte jedoch die obere linke Ecke, also habe ich nur übertrieben, womit die erste Breite und Höhe geteilt wird, und dann die zweite (B und H) mit 1 geteilt. Ich habe nie verstanden, was die Funktion von ‘google.com’ in der Verwendung war , entdeckte aber, dass es alles sein konnte, solange es alles war.

    – Erweiterung meiner Kompetenz

    15. Juni 2017 um 8:51 Uhr

  • @drymoon weißt du, warum dadurch jeder Link im selben Fenster statt in einem neuen geöffnet wird? Ziemlich nervig /:

    – Erweiterung meiner Kompetenz

    19. Juni 2017 um 6:17 Uhr

  • Scheint nur für Links mit derselben Kern-URL zu gelten.

    – Erweiterung meiner Kompetenz

    19. Juni 2017 um 12:47 Uhr

  • @drymoon Der zweite Parameter von window.open() wird genannt windowName. Dies wird nicht als Anzeigetitel des Fensters verwendet, sondern funktioniert wie die target Attribut von zB. Elemente. (Sehen developer.mozilla.org/en-US/docs/Web/API/Window/open) Wenn es auf eingestellt ist _blank (oder rufen Sie PopupCenter mit ‘_blank’ auf dem zweiten Parameter auf, es wird immer ein neues Fenster geöffnet.

    – Bencergazda

    26. Juli 2018 um 15:14 Uhr


  • @dryymoon Für mich öffnet dies immer das Fenster auf demselben Bildschirm. Wie kann ich es auf einem anderen Bildschirm öffnen?

    – Abdul Waheed

    4. Dezember 2019 um 11:46 Uhr

Keine der oben genannten Lösungen funktioniert richtig. in Bezug auf das genaue Zentrum,

Ich habe das versucht, es funktioniert gut für mich in Chrome und 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));

Dies hat jedoch auch ein Problem, wenn der Browser des zweiten Monitors halb im ersten und eine andere Hälfte im zweiten angezeigt wird.

Benutzer-Avatar
Igor Lino

Eine Javascript-basierte Lösung funktioniert aus Sicherheitsgründen nicht.

Ich habe eine andere Idee für Sie, warum nicht eine Chrome-Erweiterung für die Handhabung der Positionierung verwenden. (kein Sicherheitsproblem dort) Es ist natürlich nur für Chrom (vielleicht ist das für Sie in Ordnung).

Hintergrund: Wir hatten damit zusammenhängende Schwierigkeiten. Interne Webapp, die mehrere Dokumente in Fenstern öffnet und auf anderen Monitoren platziert werden muss. Das Javascript unterstützt dies aus Sicherheitsgründen nicht und nur eine native Erweiterung kann ordnungsgemäß mit den Registerkarten/Fenster-Objekten arbeiten.

Aus diesem Grund haben wir eine Open-Source-Chrome-Erweiterung erstellt, um genau das zu tun: flexible Fensterposition in Multi-Monitor-Setups.

In Ihrem Fall könnten Sie einfach eine Regel pro Monitor definieren, wo und wie es erscheinen würde. Sie können dies auf der Optionsseite der Chrome-Erweiterung tun. (Als Abkürzung können Sie nach der Installation direkt dorthin gehen verwenden)

Die Chrome-Erweiterung heißt “MultiWindow Positioner” und ist komplett kostenlos. Bekommst du im Chrome Store hier

Den eigentlichen Quellcode finden Sie in github im Projekt chrome-multiwindow-positionierer

Haftungsausschluss: Ich bin der Betreuer des Open Source (MIT) Github-Projekts. Wenn es interessante Ideen oder Kommentare gibt, können Sie diese gerne teilen hier.

UPDATE 21.09.2020 Ich bin nicht länger Betreuer des Open-Source-Projekts, da ich diese Firma verlassen habe. Das heißt, ich verstehe die Downvotes nicht, die Browser bieten keine window.APIs, mit denen Sie mehrere Monitore klar verstehen können, da dies eine klare Sicherheitseinschränkung / -verletzung ist. Hier helfen Browser-Plugin-Erweiterungen, da sie keine Webseite sind, erhalten sie Zugriff auf zusätzliche APIs, die es ermöglichen, Monitore und Fenster genau zu finden/aufzulisten. Sie folgen einem anderen Sicherheitskontext und daher der zusätzlichen Macht. Nicht alle Browser bieten die erforderliche Erweiterung.APIs für Mutlmonitor-Unterstützung. Mozilla Firefox meistens nicht. Chrome und das neueste MS Edge ja. Nach so vielen Jahren Erfahrung bin ich immer noch zu 100% davon überzeugt, dass es KEINE einfache Javascript-Lösung gibt, und der einzige Weg ist eine Lösung, die ein Browser-Plugin / eine Browser-Erweiterung beinhaltet.

  • „Warum nicht eine Chrome-Erweiterung verwenden“ … Nun, weil es nicht ideal klingt, zufällige Besucher unserer Website zu bitten, eine Erweiterung zu installieren, nur um ein Popup zu platzieren.

    – Arturo Torres Sanchez

    27. März 2017 um 19:27 Uhr

  • ja, insofern geht das nicht. Es ist eigentlich eine Grauzone. Browserbasierte Anwendungen, die immer mehr Funktionen benötigen, die in den Bereich des Browser-Tabs gehen wollen, während der Browser die Benutzer vor Sicherheitsproblemen schützen muss. Es ist ein Widerspruch.

    – Igor Lino

    2. Mai 2017 um 15:05 Uhr

  • Und aus eigener Erfahrung kann ich sagen, dass viele Menschen in dem Unternehmen, für das ich arbeite, ohne diese Erweiterung nicht mehr leben können. Es macht das Leben für Power-User von browserbasierten Anwendungen sowie für Entwickler wirklich viel einfacher. Ich habe Anfragen erhalten, es auf andere Browser zu portieren, aber das ist nicht möglich, da FF oder IE nicht über die erforderlichen Schnittstellen verfügen 🙁

    – Igor Lino

    2. Oktober 2018 um 7:54 Uhr

Benutzer-Avatar
Alex Skrypnyk

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

  • „Warum nicht eine Chrome-Erweiterung verwenden“ … Nun, weil es nicht ideal klingt, zufällige Besucher unserer Website zu bitten, eine Erweiterung zu installieren, nur um ein Popup zu platzieren.

    – Arturo Torres Sanchez

    27. März 2017 um 19:27 Uhr

  • ja, insofern geht das nicht. Es ist eigentlich eine Grauzone. Browserbasierte Anwendungen, die immer mehr Funktionen benötigen, die in den Bereich des Browser-Tabs gehen wollen, während der Browser die Benutzer vor Sicherheitsproblemen schützen muss. Es ist ein Widerspruch.

    – Igor Lino

    2. Mai 2017 um 15:05 Uhr

  • Und aus eigener Erfahrung kann ich sagen, dass viele Menschen in dem Unternehmen, für das ich arbeite, ohne diese Erweiterung nicht mehr leben können. Es macht das Leben für Power-User von browserbasierten Anwendungen sowie für Entwickler wirklich viel einfacher. Ich habe Anfragen erhalten, es auf andere Browser zu portieren, aber das ist nicht möglich, da FF oder IE nicht über die erforderlichen Schnittstellen verfügen 🙁

    – Igor Lino

    2. Oktober 2018 um 7:54 Uhr

Benutzer-Avatar
Mykola Uspalenko

Hier ist eine Lösung:

function openWindow( url, winnm, options)
{
    var wLeft = parseInt( typeof window.screenX != "undefined' ? window.screenX : window.screenLeft );

    var left = 0;

    if( (result = /left=(\d+)/g.exec(options)) ) {
        left = parseInt(result[1]);
    }

    if(options)
    {
       options = options.replace("left="+left,"left="+(parseInt(left) + wLeft));        
       w = window.open( url, winnm, options );
    }
    else
    {
       w = window.open( url, winnm );
    }

    if(w)
         w.focus();

    return w;
}

Sie müssen nur in Ihren js-Dateien ersetzen: window.open zu openWindow

1018230cookie-checkwindow.open() auf einem Multi-Monitor/Dual-Monitor-System – wo erscheint das Fenster?

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy