¿Cómo llego JavaScript para abrir una ventana emergente en la pantalla actual

Question

Escenario:

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

como siempre que se sepa la posición xey que cae en el monitor particular, que puede hacer:

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 2

no puede especificar el monitor, pero se puede especificar la posición de la ventana emergente como siendo relativo a donde el clic hizo que la ventana apareciera.

Utilice la función getMouseXY() para obtener los valores para pasar como args izquierdo y superior al método window.open(). (los args izquierdo y superior solo funcionan con V3 y navegadores ascendentes).

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 3

Si conoce la resolución de cada monitor, que podrían 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 del mouse (como se dijo anteriormente) o 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 es necesariamente cierto).

Answer 4

He aquí algo que descaradamente revertimos 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ámelo como el siguiente y se abrirá en la parte superior de la ventana actual

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

O que sea ligeramente desplazado

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

El punto es que la ventana. 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 darle la información que necesita. 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 definitiva a este problema (más allá de la compensación de la posición de la ventana actual) requiere el conocimiento de las dimensiones de la pantalla que está en la ventana. Dado que el objeto de la imagen no se actualiza como el usuario mueve una ventana, necesitamos crear nuestra propia forma de detectar la resolución de pantalla actual. Esto es lo que ocurrió con

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

Así que si quería que abra siempre la ventana en la parte superior izquierda de cualquier monitor de la ventana está en, usted podría utilizar el siguiente:

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

Answer 6

me encontré este problema recientemente y finalmente encontró una manera de posicionar la ventana emergente en la pantalla desde la que se desencadenó. Echar 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 availWidth, availHeight, availLeft y availTop valores (así como width y height). Para obtener una lista completa de las variables en el objeto y qué representan estas variables, mira https://developer.mozilla.org/en-US/docs/DOM/window.screen.

Esencialmente, 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 availLeft se ocupa del resto. Así es como:

Básicamente, si el primer elemento de imagen disponible en la izquierda (availLeft) es negativo, que nos dice que hay un monitor a la izquierda de la pantalla "principal". Del mismo modo, si el primer elemento de imagen disponible de la izquierda es mayor que 0, esto significa una de 2 cosas:

1. El monitor está a la derecha de la pantalla "principal", O
2. Existe cierta "basura" en el lado izquierdo de la pantalla (posiblemente la aplicación muelle o ventanas menú de inicio)

en cualquier caso desea que el desplazamiento de la ventana emergente para empezar desde después del pixel disponibles desde la izquierda.

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

Answer 7

abierto centrado en la ventana de monitor de corriente, 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(); 
    } 
}