이 페이지는 Cloud Translation API를 통해 번역되었습니다.

Window Management API로 여러 디스플레이 관리

연결된 디스플레이 및 이러한 디스플레이와 관련된 위치 창에 관한 정보를 가져옵니다.

Thomas Steiner

창 관리 API

Window Management API를 사용하면 컴퓨터에 연결된 디스플레이를 열거할 수 있습니다. 특정 화면에 창을 배치할 수 있습니다.

Window Management API 사용 방법

문제

창 제어에 대한 오랜 시간 테스트된 접근 방식 Window.open()은(는) 안타깝게도 인식하지 못합니다. 이 API의 일부 측면은 다소 구식인 것처럼 보이지만 windowFeatures 드림 DOMString 매개변수를 지원하지만 몇 년 동안 우리에게 큰 도움을 주었습니다. 윈도우의 position이 포함된 경우 좌표를 left 및 top (또는 각각 screenX와 screenY)로 설정하고 원하는 크기: width 및 height (또는 각각 innerWidth 및 innerHeight)입니다. 예를 들어 400×300 창(왼쪽에서 50픽셀, 위쪽에서 50픽셀)에 있는 경우 사용할 수 있습니다.

const popup = window.open(
  'https://example.com/',
  'My Popup',
  'left=50,top=50,width=400,height=300',
);

현재 화면에 대한 정보를 확인하려면 window.screen 속성 Screen 객체를 반환합니다. 이것은 내 MacBook Pro 13′′에 출력됩니다.

window.screen;
/* Output from my MacBook Pro 13″:
  availHeight: 969
  availLeft: 0
  availTop: 25
  availWidth: 1680
  colorDepth: 30
  height: 1050
  isExtended: true
  onchange: null
  orientation: ScreenOrientation {angle: 0, type: "landscape-primary", onchange: null}
  pixelDepth: 30
  width: 1680
*/

기술 분야에서 일하는 대부분의 사람들처럼 저도 새로운 직업 현실에 적응하고 개인용 홈 오피스 제 사진은 아래 사진처럼 보입니다 (관심이 있으시다면 설정에 관한 자세한 내용 참조). 내 MacBook 옆의 iPad가 Sidecar이므로 필요할 때마다 빠르게 iPad를 두 번째 화면으로 전환할 수 있습니다.

학교 벤치가 의자 2개 위에 놓여 있습니다. 학교 벤치 위에는 노트북을 지지하는 신발 상자와 이를 둘러싼 iPad 2개가 놓여 있습니다. — 멀티스크린 설정

더 큰 화면을 활용하려면 코드 샘플을 두 번째 화면에 붙여넣습니다. 다 했어요 :

popup.moveTo(2500, 50);

두 번째 화면의 크기는 알 수 없으므로 대략적인 추측입니다. 정보 window.screen의 데이터는 내장 화면만 커버하고 iPad 화면은 커버하지 않습니다. 신고된 width 1680픽셀이므로 2500픽셀로 이동하면 픽셀로 이동하면 창을 iPad로 옮깁니다. 내 MacBook의 오른쪽에 있다는 것을 알았기 때문입니다. 방법 일반적인 경우에도 이렇게 할 수 있나요? 결국 추측보다 더 나은 방법이 있습니다. 이렇게 하면 Window Management API

특성 감지

Window Management API가 지원되는지 확인하려면 다음을 사용하세요.

if ('getScreenDetails' in window) {
  // The Window Management API is supported.
}

`window-management` 권한

참고: 이전 window-placement 권한 이름은 더 이상 지원되지 않습니다.

Window Management API를 사용하려면 먼저 사용자에게 사용 권한을 요청해야 합니다. window-management 권한은 다음 명령어로 쿼리할 수 있습니다. Permissions API:

let granted = false;
try {
  const { state } = await navigator.permissions.query({ name: 'window-management' });
  granted = state === 'granted';
} catch {
  // Nothing.
}

이전 권한 이름과 새 권한 이름을 사용하는 브라우저가 사용 중일 때 권한을 요청할 때는 아래 예와 같이 방어 코드를 사용해야 합니다.

async function getWindowManagementPermissionState() {
  let state;
  // The new permission name.
  try {
    ({ state } = await navigator.permissions.query({
      name: "window-management",
    }));
  } catch (err) {
    return `${err.name}: ${err.message}`;
  }
  return state;
}

document.querySelector("button").addEventListener("click", async () => {
  const state = await getWindowManagementPermissionState();
  document.querySelector("pre").textContent = state;
});

브라우저 할 수 있습니다 확인할 수 있습니다 자세한 내용을 알아보려면 계속 읽어보세요.

`window.screen.isExtended` 속성

내 기기에 두 개 이상의 화면이 연결되어 있는지 확인하기 위해 window.screen.isExtended 속성입니다. true 또는 false를 반환합니다. 내 설정에서는 true을 반환합니다.

window.screen.isExtended;
// Returns `true` or `false`.

`getScreenDetails()` 메서드

현재 설정이 복수 기기 지원이라는 것을 알게 되었으므로 이제 두 번째 화면(Window.getScreenDetails() 사용) 이 함수를 호출하면 사이트가 열리고 화면에 창을 배치할 수 있는지 묻습니다. 함수가 프로미스를 반환합니다. ScreenDetailed 객체로 확인됩니다. 연결된 iPad가 있는 MacBook Pro 13에서 여기에는 두 개의 ScreenDetailed 객체가 있는 screens 필드가 포함됩니다.

await window.getScreenDetails();
/* Output from my MacBook Pro 13″ with the iPad attached:
{
  currentScreen: ScreenDetailed {left: 0, top: 0, isPrimary: true, isInternal: true, devicePixelRatio: 2, …}
  oncurrentscreenchange: null
  onscreenschange: null
  screens: [{
    // The MacBook Pro
    availHeight: 969
    availLeft: 0
    availTop: 25
    availWidth: 1680
    colorDepth: 30
    devicePixelRatio: 2
    height: 1050
    isExtended: true
    isInternal: true
    isPrimary: true
    label: "Built-in Retina Display"
    left: 0
    onchange: null
    orientation: ScreenOrientation {angle: 0, type: "landscape-primary", onchange: null}
    pixelDepth: 30
    top: 0
    width: 1680
  },
  {
    // The iPad
    availHeight: 999
    availLeft: 1680
    availTop: 25
    availWidth: 1366
    colorDepth: 24
    devicePixelRatio: 2
    height: 1024
    isExtended: true
    isInternal: false
    isPrimary: false
    label: "Sidecar Display (AirPlay)"
    left: 1680
    onchange: null
    orientation: ScreenOrientation {angle: 0, type: "landscape-primary", onchange: null}
    pixelDepth: 24
    top: 0
    width: 1366
  }]
}
*/

연결된 화면에 관한 정보는 screens 배열에서 확인할 수 있습니다. 이 값이 iPad의 left는 정확히 내장 디스플레이의 width인 1680부터 시작합니다. 이 이를 통해 화면이 논리적으로 (서로 나란히, 상하로 배치되는) 등). 이제 각 화면이 isInternal 상태인지를 보여주는 데이터도 있습니다. isPrimary인지 여부입니다. 참고: 내장 화면은 반드시 기본 화면이 아닐 수도 있습니다.

currentScreen 필드는 현재 window.screen에 상응하는 라이브 객체입니다. 객체 교차 화면 창 게재위치 또는 기기 변경에 따라 업데이트됩니다.

참고: Chromium의 최신 API 구현은 다음과 같이 기본 플랫폼에서 제공하는 화면 라벨을 반환합니다. "Internal Display 1"와 같이 설명이 덜한 자리표시자 대신 "Built-in Retina Display" 사용

`screenschange` 이벤트

이제 필요한 것은 화면 설정이 변경될 때 감지하는 방법뿐입니다. 새 이벤트, screenschange는 정확히 이를 실행합니다. 화면 집합이 수정될 때마다 실행됩니다. (알림 '화면'이 복수형도 가능합니다.) 즉, 새 화면이나 기존 화면이 (사이드카의 경우 물리적으로 또는 가상으로) 연결되어 있거나 분리되어 있습니다.

새 화면 세부정보인 screenschange 이벤트를 비동기식으로 조회해야 합니다. 자체는 이 데이터를 제공하지 않습니다. 화면 세부정보를 조회하려면 Screens 인터페이스

const screenDetails = await window.getScreenDetails();
let cachedScreensLength = screenDetails.screens.length;
screenDetails.addEventListener('screenschange', (event) => {
  if (screenDetails.screens.length !== cachedScreensLength) {
    console.log(
      `The screen count changed from ${cachedScreensLength} to ${screenDetails.screens.length}`,
    );
    cachedScreensLength = screenDetails.screens.length;
  }
});

`currentscreenchange` 이벤트

현재 화면 (즉, 라이브 객체의 값)에만 관심이 있는 경우 currentScreen)에서 currentscreenchange 이벤트를 수신할 수 있습니다.

const screenDetails = await window.getScreenDetails();
screenDetails.addEventListener('currentscreenchange', async (event) => {
  const details = screenDetails.currentScreen;
  console.log('The current screen has changed.', event, details);
});

`change` 이벤트

마지막으로 콘크리트 화면의 변경에만 관심이 있다면 해당 화면의 change 이벤트를 사용합니다.

const firstScreen = (await window.getScreenDetails())[0];
firstScreen.addEventListener('change', async (event) => {
  console.log('The first screen has changed.', event, firstScreen);
});

새로운 전체 화면 옵션

지금까지는 이름이 적절하게 지정된 requestFullScreen() 드림 메서드를 사용하여 축소하도록 요청합니다. 이 메서드는 다음을 전달할 수 있는 options 매개변수를 사용합니다. FullscreenOptions 지금까지 유일한 속성은 navigationUI Window Management API는 새 screen 속성을 추가하여 전체 화면 보기를 시작할 화면입니다. 예를 들어 기본 화면으로 전체 화면:

try {
  const primaryScreen = (await getScreenDetails()).screens.filter((screen) => screen.isPrimary)[0];
  await document.body.requestFullscreen({ screen: primaryScreen });
} catch (err) {
  console.error(err.name, err.message);
}

폴리필

Window Management API는 폴리필할 수 없지만 모양을 shim하여 새 API에서만 코딩할 수 있습니다.

if (!('getScreenDetails' in window)) {
  // Returning a one-element array with the current screen,
  // noting that there might be more.
  window.getScreenDetails = async () => [window.screen];
  // Set to `false`, noting that this might be a lie.
  window.screen.isExtended = false;
}

API의 다른 측면, 즉 다양한 화면 변경 이벤트 및 screen 속성 FullscreenOptions는 단순히 실행되지 않거나 표시됩니다.

데모

저와 같다면, 다양한 산업의 발전을 주시하고 암호화폐 (사실 저는 이 행성을 사랑하기 때문에 싫어하지만, 이 글에서는 이 코드가 did.) 소유하고 있는 암호화폐를 추적하기 위해 웹 앱을 개발했습니다. 삶의 모든 상황에서 시장을 봅니다. 침대에서 편안하게 설정할 수 있습니다.

침대 끝에 놓인 대형 TV 화면에 작가의 다리가 부분적으로 보입니다. 화면에는 가짜 암호화폐 트레이딩 데스크가 있습니다. — 느긋하게 시장 구경하기

암호화폐에 관한 것이기 때문에 시장은 언제든지 정신없이 바쁠 수 있습니다. 이런 일이 발생할 경우 신속하게 멀티스크린이 설정된 책상으로 옮깁니다. 원하는 통화 창을 클릭하면 반대편 화면의 전체 화면 보기로 전체 세부정보를 빠르게 볼 수 있습니다. 아래는 최근 사진입니다. 지난 YCY 유혈 사태 때 혈당을 돌렸습니다. 포착됨 전혀 초조해 하고 떠났어 손을 얼굴에 대고 있네요

작성자는 당황한 얼굴에 손을 얹은 채 가짜 암호화폐 트레이딩 데스크를 바라보고 있습니다. — 패닉스, YCY 유혈 목격.

아래에 삽입된 데모를 사용해 보거나 글리치에서 소스 코드를 확인해 보세요.

보안 및 권한

Chrome팀은 핵심 웹 기반 인터페이스를 사용하여 Window Management API를 설계 및 구현했습니다. 강력한 웹 플랫폼 기능에 대한 액세스 제어에 정의된 원칙 사용자 제어, 투명성, 인체공학을 포함합니다. Window Management API는 새로운 정보가 넘쳐나기 때문에 기기의 디지털 지문 수집 표면이 사용자, 특히 기기에 일관되게 연결된 여러 화면을 사용하는 사용자의 경우 특히 더 그렇습니다. 하나로 개인 정보 보호 문제를 완화하기 위해 노출된 화면 속성이 필요한 최소로 제한됩니다. 를 참조하세요. 사이트에서 멀티스크린을 사용하려면 사용자 권한이 필요합니다. 다른 화면에 창을 배치할 수 있습니다. Chromium은 상세 화면 라벨을 반환하지만 브라우저는 설명이 적거나 빈 라벨을 자유롭게 반환할 수 있습니다.

사용자 제어

사용자는 설정의 노출을 완전히 제어할 수 있습니다. 고객은 권한 메시지를 표시하고, 사이트 정보 기능을 통해 이전에 부여된 권한을 취소할 때 있습니다.

엔터프라이즈 제어

Chrome Enterprise 사용자는 자세한 내용은 전체 정책 그룹 설정을 변경할 수 있습니다.

투명성

Window Management API 사용 권한이 부여되었는지 여부 브라우저의 사이트 정보에 노출되며 Permissions API를 통해서도 쿼리할 수 있습니다.

권한 지속성

브라우저가 권한 부여를 유지합니다. 브라우저의 사이트를 통해 권한을 취소할 수 있습니다. 확인할 수 있습니다

의견

Chrome팀에서 Window Management API 사용 경험에 관한 의견을 듣고자 합니다.

API 설계에 대해 알려주세요.

API에서 예상대로 작동하지 않는 부분이 있나요? 또는 누락된 메서드가 있나요? 속성이 있나요? 보안에 대한 질문이나 의견이 있으면 무엇인가요?

해당 GitHub 저장소에서 사양 문제를 신고하거나 기존 있습니다.

구현 문제 신고

Chrome 구현에서 버그를 발견하셨나요? 아니면 구현이 사양과 다른가요?

new.crbug.com에서 버그를 신고합니다. 최대한 많은 세부정보를 포함해야 합니다. 간단한 재현 지침을 확인하고, 입력란에 Blink>Screen>MultiScreen를 Components 체크박스를 선택합니다. Glitch는 쉽고 빠른 재현을 공유하는 데 효과적입니다.

API 지원 표시

Window Management API를 사용할 계획이신가요? 여러분의 공개적 후원은 Chrome 팀에 문의하여 기능의 우선순위를 정하고 해당 기능을 지원하는 것이 얼마나 중요한지 다른 브라우저 공급업체에 보여줍니다.

WICG 담화 대화목록에서 사용 계획을 공유합니다.
해시태그를 사용하여 @ChromiumDev에 트윗을 보냅니다. #WindowManagement 및 어디에서 어떻게 사용하는지 알려주세요.
다른 브라우저 공급업체에 API 구현을 요청합니다.

유용한 링크

사양 초안
공개 설명
Window Management API 데모 | Window Management API 데모 출처
Chromium 추적 버그
ChromeStatus.com 항목
깜박임 구성요소: Blink>Screen>MultiScreen
TAG 검토
실험 의도

감사의 말씀

Window Management API 사양은 빅터 코스탄 조슈아 벨 마이크 와서만 이 API는 마이크 와서먼, 아드리안 워커. 이 기사에 대해 리뷰한 사용자 조 메들리, 프랑수아 보퍼, Kayce Basques가 있습니다. 사진을 제공해 주신 Laura Torrent Puig에게 감사드립니다.