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

Ответ 1

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

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

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

Ответ 2

Вот что я бесстыдно переделал из 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));

Ответ 3

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

Дело в том, что window.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);
  })
}

Ответ 4

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

Ответ 5

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

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

Ответ 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, это означает одну из двух вещей:

     

•   
• Монитор находится справа от главного монитора, OR  
• В левой части экрана есть некоторые "мусор" (возможно, приложение для приложения или меню запуска Windows).  

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

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

Ответ 7

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

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