¿Cómo obtengo JavaScript para abrir una ventana emergente en el monitor actual?

multiple-monitors

Question

Guión:

1. El usuario tiene dos monitores.
2. Su navegador está abierto en el monitor secundario.
3. Hacen clic en un enlace en el navegador que llama a window.open () con un desplazamiento de ventana superior e izquierdo específico.
4. La ventana emergente siempre se abre en su monitor principal.

¿Hay alguna forma en JavaScript para abrir la ventana emergente en el mismo monitor que la ventana inicial del navegador (el abridor)?

Answer 1

No puede especificar el monitor, pero puede especificar la posición de la ventana emergente como relativa al lugar donde el clic hizo que apareciera la ventana.

Use la función getMouseXY () para que los valores pasen, ya que la izquierda y la superior args al método window.open (). (los args izquierdo y superior solo funcionan con V3 y navegadores ascendentes).

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

Answer 2

siempre que sepa la posición xey que corresponde a un monitor en particular, puede hacer lo siguiente:

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

Answer 3

Si conoce la resolución de cada monitor, podría estimar esto. Una mala idea para un sitio web público, pero podría ser útil si usted sabe (por alguna extraña razón) que este escenario siempre se aplicará.

La posición relativa al mouse (como se dijo anteriormente) o a la ventana del navegador original también podría ser útil, aunque tendría que suponer que el usuario utiliza el navegador maximizado (que no necesariamente es cierto).

Answer 4

Aquí hay algo que descaradamente he invertido desde la API de Facebook oauth. Probado en un monitor primario y secundario en 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 5

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

Llámalo como el siguiente y se abrirá en la parte superior de la ventana actual

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

O hazlo ligeramente compensado

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

El punto es que window.screenX / screenLeft le da la posición en relación con todo el escritorio, no solo el monitor.

window.screen.left sería el candidato ideal para brindarte la información que necesitas. El problema es que se establece cuando la página se carga y el usuario puede mover la ventana al otro monitor.

Más investigación

Una solución final a este problema (más allá de compensar la posición actual de la ventana) requiere conocer las dimensiones de la pantalla en la que se encuentra la ventana. Dado que el objeto de pantalla no se actualiza a medida que el usuario mueve una ventana, tenemos que diseñar propia forma de detectar la resolución de pantalla actual. Esto es lo que se me ocurrió

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

Por lo tanto, si siempre desea abrir la ventana en la parte superior izquierda del monitor en el que se encuentra la ventana, puede usar lo siguiente:

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

Answer 6

Me encontré con este problema recientemente y finalmente encontré una manera de posicionar la ventana emergente en la pantalla desde la que se desencadenó. Echa un vistazo a mi solución en mi página de github aquí: https://github.com/svignara/windowPopUp

El truco está en utilizar el objeto window.screen , que devuelve los availWidth , availHeight , availLeft y availTop (además del width y height ). Para obtener una lista completa de las variables en el objeto y lo que representan estas variables, consulte https://developer.mozilla.org/en-US/docs/DOM/window.screen .

Básicamente, mi solución encuentra los valores de window.screen cada vez que se hace clic en el disparador de la ventana emergente. De esta forma sé con certeza de qué pantalla de monitor se está haciendo clic. El valor de availLeft se ocupa del resto. Así es cómo:

Básicamente, si el primer píxel disponible desde la izquierda ( availLeft ) es negativo, eso nos indica que hay un monitor a la izquierda del monitor "principal". Del mismo modo, si el primer píxel disponible desde la izquierda es mayor que 0, esto significa una de dos cosas:

1. El monitor está a la derecha del monitor "principal", O
2. Hay algo de "basura" en el lado izquierdo de la pantalla (posiblemente el dock de la aplicación o el menú de inicio de Windows)

En cualquier caso, desea que comience el desplazamiento de su ventana emergente después del píxel disponible desde la izquierda.

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

Answer 7

Abra la ventana centrada en el monitor actual, trabajando también con 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();
    }
}