web-dev-qa-db-fra.com

window.open () sur un système multi-moniteur / double moniteur - où la fenêtre apparaît-elle?

Lorsque vous utilisez javascript window.open () sur un système à plusieurs moniteurs, comment contrôlez-vous quel moniteur, ou où dans l'espace d'affichage la fenêtre contextuelle s'ouvre? Cela me semble hors de contrôle et sinon aléatoire dans son comportement.

javascriptpopupwindowwindow.openmultiple-monitors
34
Bob Brunius

Le résultat de la recherche "window.open dual-screen" a révélé cette pépite de fantaisie: Dual Monitors et Window.open

"Lorsque l'utilisateur clique sur un lien qui ouvre une nouvelle fenêtre à l'aide de window.open. Faites apparaître la fenêtre sur le même moniteur que son parent."

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

Maintenant que le code est écrit, vous pouvez maintenant utiliser window.open pour ouvrir une fenêtre sur le moniteur sur lequel se trouve la fenêtre parent.

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

S'il réussit à vous permettre d'ouvrir une fenêtre contextuelle sur le même écran que le document le lançant, alors avec un effort similaire, vous devriez pouvoir le modifier pour qu'il se comporte différemment.

Notez que, comme la longueur du code l'indique, il n'y a pas de fonction intégrée pour comprendre plusieurs moniteurs dans jquery/javascript/navigateurs, seulement que le bureau à double écran est simplement un plan cartésien unique agrandi au lieu de deux plans discrets.

Mise à jour

Le lien est mort. Utilisez ce lien waybackmachine

18
BrianH

window.screenX donnera la position de l'écran actuel du moniteur.

supposons que la largeur du moniteur soit de 1360

pour moniteur 1 window.screenX = 0;

pour moniteur 2 window.screenX = 1360;

donc en ajoutant la position gauche avec window.screenX, popup ouvert dans la position attendue.

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

UNE FONCTION:

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

USAGE:

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

Il fonctionnera également sur les fenêtres réduites

8
dryymoon

Une solution basée sur javascript ne fonctionne pas pour des raisons de sécurité.

J'ai une autre idée pour vous, pourquoi ne pas utiliser une extension chrome pour gérer le positionnement. (Pas de problème de sécurité là-bas) Ce n'est bien sûr que pour le chrome (peut-être que c'est bien pour vous).

Contexte: Nous avons eu des difficultés liées. Webapp interne qui ouvre plusieurs documents dans des fenêtres et doit être placée dans d'autres moniteurs. Le javascript ne le supporte pas, pour des raisons de sécurité et seule une extension native peut fonctionner correctement avec les objets tabs/windows.

Par conséquent, nous avons créé une extension open source chrome pour faire exactement cela: position flexible des fenêtres dans les configurations multi-écrans.

Dans votre cas, vous pouvez facilement définir une règle par moniteur où et comment elle apparaîtra. Vous pouvez le faire dans la page d'options de l'extension chrome. (Comme shorcut vous pouvez, après l'installation, y aller directement en utilisant )

L'extension chrome s'appelle "MultiWindow Positioner" et est entièrement gratuite. Vous pouvez l'obtenir sur le chrome store ici

Le code source réel que vous trouvez dans github dans le projet chrome-multiwindow-positioner

Avertissement: Je suis le responsable du projet github open source (MIT). S'il y a une idée intéressante ou des commentaires, n'hésitez pas à les partager ici .

2
Igor Lino

Aucune des solutions ci-dessus ne fonctionne correctement. en termes de centre exact,

J'ai essayé, cela fonctionne bien pour moi dans chrome et 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));

Mais cela a également un problème si le second navigateur de moniteurs est vu à moitié en premier et en deuxième moitié.

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