Как получить JavaScript, чтобы открыть всплывающее окно на текущем мониторе

Question

Сценарий:

1. Пользователь имеет два монитора.
2. Их браузер открыт на дополнительном мониторе.
3. Они нажимают ссылку в браузере, которая вызывает window.open() со специальным смещением верхнего и левого окна.
4. Всплывающее окно всегда открывается на их основном мониторе.

Есть ли какой-нибудь способ в JavaScript, чтобы открыть всплывающее окно на том же мониторе, что и начальное окно браузера (открывающий)?

Answer 1

до тех пор, как вы знаете, х и у позиции, которая падает на конкретном мониторе вы можете сделать:

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

Вы не можете указать монитор, но вы можете указать положение всплывающего окна, как относительно того, где щелчок вызвал всплывающее окно.

Используйте функцию getMouseXY(), чтобы получить значения для прохождения, поскольку левый и верхний аргументы относятся к методу window.open(). (левый и верхний аргументы работают только с V3 и выше браузерами).

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 3

Если вы знаете, разрешение каждого монитора, вы могли бы оценить это. Плохая идея для общедоступного веб-сайта, но может быть полезна, если вы знаете (по какой-то нечетной причине), что этот сценарий всегда будет применяться.

Относительное положение мыши (как указано выше) или в исходное окно браузера также может быть полезно, хотя вы должны предположить, что пользователь использует браузер максимально (что не обязательно верно).

Answer 4

Вот что я бесстыдно переделал из API oauth Facebook. Протестировано на первичном и вторичном мониторе в 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)) 
} 

Называйте это как следующий, и он откроется поверх текущего окна

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

Или сделать его немного смещена

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

Дело в том, что окно. screenX/screenLeft дает вам позицию в отношении всего рабочего стола, а не только монитора.

window.screen.left был бы идеальным кандидатом для предоставления вам необходимой информации. Проблема в том, что она задается при загрузке страницы, и пользователь может переместить окно на другой монитор.

Дополнительные исследования

Окончательное решение этой проблемы (вне только компенсируя от текущей позиции), требуется знать размеры экрана, что окно находится. Поскольку экранный объект не обновляется пользователь перемещает окно вокруг, нам нужно создать собственный способ определения текущего разрешения экрана. Вот что я придумал

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

Так что если вы хотите, чтобы всегда открыть окно в левом верхнем углу любой монитор окно, вы можете использовать следующее:

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

Answer 6

я столкнулся этот вопрос недавно и, наконец, нашел способ расположить всплывающее окно на экране, из которого он вызван. Посмотрите на мое решение на моей странице GitHub здесь: https://github.com/svignara/windowPopUp

Хитрость заключается в использовании window.screen объект, который возвращает availWidth, availHeight, availLeft и availTop значения (а также width и height). Полный список переменных в объекте и представления этих переменных смотрите на https://developer.mozilla.org/en-US/docs/DOM/window.screen.

По сути, мое решение находит значения window.screen всякий раз, когда нажимается триггер для всплывающего окна. Таким образом, я точно знаю, на каком экране монитора он нажал. Значение availLeft заботится обо всем остальном. Вот как:

В принципе, если первый доступный пиксель слева (availLeft) отрицателен, что говорят нам есть монитор слева от «главного» монитора. Аналогичным образом, если первый доступный пиксель слева больше 0, это означает, что один из 2-х вещей:

1. Монитор находится справа от «основного» монитора, ИЛИ
2. Существует несколько «мусорных» на левой стороне экрана (возможно применение док или окна меню запуска)

в любом случае, если вы хотите смещение вашего всплывающего окна, чтобы начать с после доступного пикселя слева.

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

Answer 7

Открыть в центре окна на текущем мониторе, работая также с 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(); 
    } 
}