Блог

Можно ли определить, использует ли пользователь веб-сайта несколько мониторов? Мне нужно найти положение всплывающего окна, но вполне вероятно, что у пользователя будет настройка нескольких мониторов. Пока window.screenX и т.д. задаст положение окна браузера, которое бесполезно для нескольких мониторов.

Я не нашел нужного мне ответа нигде в StackOverflow, поэтому отвечаю с опозданием на несколько связанных потоков здесь. Решение состоит в том, чтобы, во-первых, проверить наличие вторичного отображения с помощью window.screen.isExtended . Затем await window.getScreenDetails() , который возвращает объект, включающий массив экранов.

Очень подробное объяснение здесь: https://web.dev/multi-screen-window-placement /

Я не верю, что это возможно прямо сейчас; однако js становится все более популярным для настольного использования в виджетах в дополнение к веб-разработке, и это было бы отличной возможностью запросить будущую версию

Это слишком сложное решение. Я бы настоятельно рекомендовал провести рефакторинг этого — он не использовался на производственном сайте, только в качестве быстрого «доказательства концепции» для себя.

Хорошо, предостережения закончены.

Сначала я предположил, что у пользователя может не быть настройки с двумя мониторами, но у них может быть действительно большой монитор, и поэтому в любом случае может быть применена та же функциональность.

 var newWindow,
    screenSpaceLeft = window.screenX,
    screenSpaceTop = window.screenY,
    screenSpaceRight = screen.availWidth - (window.screenX   window.outerWidth),
    screenSpaceBottom = screen.availHeight - (window.screenY   window.outerHeight),
    minScreenSpaceSide = 800,
    minScreenSpaceTop = 600,
    screenMargin = 8,

    width = (screen.availWidth / 2.05),
    height = screen.availHeight,
    posX = (screen.availWidth / 2),
    posY = 0;

e.preventDefault();

if (screenSpaceRight > screenSpaceLeft amp;amp; screenSpaceRight > screenSpaceTop amp;amp; screenSpaceRight > screenSpaceBottom amp;amp; screenSpaceRight > minScreenSpaceSide) {
    if (width > screenSpaceRight) {
        width = screenSpaceRight - screenMargin;
    }
    if (posX < (screen.availWidth - screenSpaceRight)) {
        posX = window.screenX   window.outerWidth   screenMargin;
    }
} else if (screenSpaceLeft > screenSpaceRight amp;amp; screenSpaceLeft > screenSpaceTop amp;amp; screenSpaceLeft > screenSpaceBottom amp;amp; screenSpaceLeft > minScreenSpaceSide) {
    if (width > screenSpaceLeft) {
        width = screenSpaceLeft - screenMargin;
    }

    posX = 0;
} else if (screenSpaceTop > screenSpaceRight amp;amp; screenSpaceTop > screenSpaceLeft amp;amp; screenSpaceTop > screenSpaceBottom amp;amp; screenSpaceTop > minScreenSpaceTop) {
    posX = 0;
    posY = 0;
    width = screen.availWidth;
    height = (screen.availHeight / 2.05);
    if (height > screenSpaceTop) {
        height = screenSpaceTop - screenMargin;
    }
} else if (screenSpaceBottom > screenSpaceRight amp;amp; screenSpaceBottom > screenSpaceLeft amp;amp; screenSpaceBottom > screenSpaceTop amp;amp; screenSpaceBottom > minScreenSpaceTop) {
    posX = 0;
    width = screen.availWidth;
    if (window.screenY   window.outerHeight   screenMargin > (screen.availHeight / 2)) {
        posY = window.screenY   window.outerHeight   screenMargin;
    } else {
        posY = (screen.availHeight / 2);
    }
    height = (screen.availHeight / 2.05);
    if (height > screenSpaceBottom) {
        height = screenSpaceBottom - screenMargin;
    }
}

newWindow = window.open(this.href, "_blank", "width="   width   ",height="   height   ",location=yes,menubar=no,resizable=yes,scrollbars=yes,status=yes,menubar=yes,top="   posY   ",left="   posX);
  

Он проверяет, сколько свободного места на экране есть, и если доступно минимальное количество (800 x 600), он открывает окно там. Если места недостаточно, оно перекрывает окно в правой части экрана, занимая примерно половину его.

Примечания:

Во-первых, его следует изменить, чтобы определить, где находится максимальный объем пространства, а не просто произвольно выполнять поиск слева, справа, сверху, снизу.

Во-вторых, я подозреваю, что в некоторых местах, где использовался screen.availHeight, screen.вместо этого следует использовать height. Аналогично для ширины. Это потому, что нас не слишком интересует, где находится панель задач, когда мы решаем, есть ли у пользователя второй монитор или нет (или много места на экране).

В-третьих, это не будет работать в IE < 8. Это можно легко исправить, используя screenLeft и screenTop, а не ScreenX / screenY, где это уместно.

В-четвертых, код неаккуратен, и его можно было бы придать ему гораздо более элегантный вид, чем он есть на самом деле. Я не приношу извинений за это. Однако вам НИГДЕ не следует использовать такой ужасный, не поддерживаемый JS, и его НУЖНО переписать. Я поместил это здесь только потому, что в данный момент это входит в ход моих мыслей, и я, скорее всего, забуду опубликовать хорошее решение здесь, когда напишу это должным образом, поскольку это не произойдет в течение нескольких месяцев.

Правильно. Вот так. Я не несу ответственности за то, что ваш javascript ужасен, уродлив и с ним совершенно сложно что-либо делать. 🙂

Я нашел это как решение, которое кто-то использовал… Я не понимаю, почему вы не могли этому доверять.

[если ширина больше, чем (Высота /3) * 4 > (Screen.Ширина) ЗАТЕМ]

[У пользователя два монитора]

[Завершить, если]

Вы не можете этого сделать. Однако вы могли бы расположить всплывающее окно по центру родительского окна. Я думаю, что лучше показывать «div» в виде диалогового окна в середине вашего веб-сайта, потому что вероятность того, что это всплывающее окно заблокировано, меньше, и это ИМО менее раздражает.

Как насчет размера экрана? Несколько экранов обычно имеют большой размер. Просто проверьте размеры и решите, разумно ли размещать только на одном или нескольких экранах.

Вы могли бы сделать обоснованное предположение с помощью screen.width ( .availWidth ) и screen.height ( .availHeight ) JavaScript.

Моя идея состояла в том, чтобы предположить (!), что мониторы в целом следуют определенному соотношению, тогда как .[доступно] ширина должна быть за его пределами, потому что экран дублируется только по ширине, но не по высоте.

Хотя при написании этого ответа это звучит как серьезный взлом. Ничего, на что я бы действительно полагался.