Как получить текущий монитор окна в js

Я сам задавался этим вопросом. К сожалению, не существует прямого способа надежно определить монитор, на котором в последний раз закрывалось окно, с помощью JavaScript. Браузеры не предоставляют API для получения информации монитора для окна.

Вот почему это сложно:

• Проблемы безопасности: доступ к информации о мониторах может быть использован в злонамеренных целях, поэтому браузеры ограничивают этот доступ.
• Межплатформенные проблемы. Каждая операционная система и браузер по-разному обрабатывают настройки нескольких мониторов. Решение, которое работает в Chrome в Windows, может не работать в macOS или Linux.

Обходные пути

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

1. Ручная регулировка:

• Вы можете предложить пользователю настроить положение окна вручную при первом его открытии на новом мониторе.
• Предоставьте элементы пользовательского интерфейса во всплывающем окне, чтобы пользователь мог вручную перемещать положение и размер окна, а также сохранять эти изменения.

2. (Частичное) Решение с использованием screen.availHeight/Width:

• Вы можете использовать screen.availHeight и screen.availWidth, чтобы получить доступное пространство на экране, что может дать вам представление о разрешении монитора.
• Однако это не скажет вам точный монитор, и пользователю может потребоваться настроить окно, если доступное пространство экрана меняется на разных мониторах.

Пример (частичное решение):

const handleExpandClick = (id) => {
  const storedPosition = getPositionFromStorage();
  const availableWidth = screen.availWidth;
  const availableHeight = screen.availHeight;

  // If the stored position is outside the current monitor's bounds, 
  // reposition the window closer to the center.
  let updatedPosition = storedPosition;
  if (storedPosition.left > availableWidth || storedPosition.top > availableHeight) {
    updatedPosition = `top=${availableHeight / 2},left=${availableWidth / 2},width=800,height=600`;
  }

  const pdfWindow = window.open(
    `http://127.0.0.1:8000/transactions/matching_evidence/${id}#toolbar=0,view=FitH`,
    "pdf",
    updatedPosition
  );

  // ... rest of your code
};

3. Пользовательский ввод:

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

4. Сторонние библиотеки:

• Изучите сторонние библиотеки, которые могут предлагать возможности обнаружения монитора. Будьте осторожны с их последствиями для надежности и безопасности.

Заключение

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

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

const savePositionToStorage = (position) => {
    localStorage.setItem('windowPosition', JSON.stringify(position));
    console.info('Position saved:', position);
}

const getPositionFromStorage = () => {
    const position = JSON.parse(localStorage.getItem('windowPosition'));
    return position ? position : { top: 0, left: 0, width: 800, height: 1000 };
}


// #region Click Events
const handleExpandClick = async (id) => {
    const storedPosition = getPositionFromStorage();
    const windowFeatures = `top=${storedPosition.top},left=${storedPosition.left},height=${storedPosition.height},width=${storedPosition.width}`;

    const pdfWindow = window.open(
        `http://127.0.0.1:8000/transactions/matching_evidence/${id}#toolbar=0,view=FitH`,
        "pdf",
        windowFeatures,
    );


    pdfWindow.onload = () => {
        pdfWindow.onbeforeunload = () => {
            savePositionToStorage({ "top": pdfWindow.screenY, "left": pdfWindow.screenX, "height": pdfWindow.innerHeight, "width": pdfWindow.innerWidth })
        }
    }
}
// #endregion

Я попрошу своих коллег опробовать этот код позже и сообщу, работает ли он там. Очень странно

Редактировать: Хорошо, проблема, похоже, в управлении окнами. Это должно быть установлено, чтобы разрешить. Я пока не знаю, как получить разрешения

Редактировать: Я нашел проблему сейчас. Мне просто нужно было дождаться обещания и продолжить (полный код):
Имейте в виду, что это не будет работать с FireFox. https://developer.mozilla.org/en-US/docs/Web/API/Window/getScreenDetails

// #windowLocation
const savePositionToStorage = (position) => {
    localStorage.setItem('windowPosition', JSON.stringify(position));
}

const getPositionFromStorage = () => {
    const position = JSON.parse(localStorage.getItem('windowPosition'));
    return position ? position : { top: 0, left: 0, width: 800, height: 1000 };
}

const loadWindow = (windowFeatures, id) => {
    const pdfWindow = window.open(
        `http://127.0.0.1:8000/transactions/matching_evidence/${id}#toolbar=0,view=FitH`,
        "pdf",
        windowFeatures,
    );

    pdfWindow.onload = () => {
        pdfWindow.onbeforeunload = () => {
            savePositionToStorage({ "top": pdfWindow.screenY, "left": pdfWindow.screenX, "height": pdfWindow.innerHeight, "width": pdfWindow.innerWidth })
        }
    }
}
// #endregion


// #region Click Events
const handleExpandClick = (id) => {
    const storedPosition = getPositionFromStorage();
    const windowFeatures = `top=${storedPosition.top},left=${storedPosition.left},height=${storedPosition.height},width=${storedPosition.width}`;

    // if there are multiple screens, ask the user for window Management permissions.
    // supported browser: https://developer.mozilla.org/en-US/docs/Web/API/Window/getScreenDetails
    if (window.screen.isExtended) {
        window.getScreenDetails().then(() => {
            loadWindow(windowFeatures, id);
        });
    } else {
        loadWindow(windowFeatures, id);
    }
}
// #endregion