전체 화면 팝업 창의 새로운 오리진 트라이얼

Thomas Steiner

전체 화면 모드에서 팝업 창을 열고 싶다고 가정해 보겠습니다. 지금까지는 전체 화면 팝업 창을 여는 과정은 두 단계로 구성되었습니다.

  1. 기본 앱 창에서 팝업 창 열기 버튼 클릭과 같은 사용자 동작이 필요한 window.open() 메서드 호출
  2. 팝업 창에서 Element.requestFullscreen() 메서드를 호출합니다. 이 경우에도 전체 화면 모드 진입 버튼 클릭과 같은 사용자 동작이 필요합니다.

이제 Chrome 119 (안정화 버전)에서 실행되는 새로운 오리진 트라이얼이 제공됩니다. 2023년 10월 31일~Chrome 122 (정식 날짜): 2023년 10월 31일 한 단계만으로 전체 화면 모드에서 팝업 창을 열 수 있습니다. 전체 화면 창으로 팝업 열기 오리진 트라이얼 방문 페이지에서 등록을 클릭하여 가입합니다. 오리진 트라이얼과 별도로 chrome://flags/#fullscreen-popup-windows 플래그를 사용 설정됨으로 설정하여 로컬에서 테스트할 수도 있습니다.

현재 화면에서 전체 화면 팝업 창을 엽니다.

이 새로운 기능은 window-management 권한을 통해 관리됩니다. 사용자가 권한을 부여하면 다음 예와 같이 전체 화면 팝업 창을 열 수 있습니다.

document.querySelector('.fullscreen-popoup-button').addEventListener('click', async (e) => {
  if ((await navigator.permissions.query({name: 'window-management'})).state !== 'granted') {
    // Permission not granted. Call `window.getScreenDetails()` to prompt.
    await window.getScreenDetails();
  }
  // Permission granted. Open the fullscreen popup window.
  window.open('https://example.com/popup.html', '_blank', 'popup,fullscreen');
});

코드 샘플의 마지막 줄에서 첫 번째 매개변수는 팝업 창에서 열 url입니다. 두 번째 매개변수는 _blank의 특수 값이 있는 target입니다. 세 번째 매개변수는 windowFeatures을 위한 것으로, 쉼표로 구분된 문자열로, 팝업 창을 여는 데 사용되는 popup 값과 전체 화면 모드로 팝업 창을 여는 데 사용되는 새 값 fullscreen을 포함합니다. 이 기능은 하나의 사용자 동작으로만 작동하므로 버튼을 한 번 클릭하여 활성화할 수 있습니다.

다른 화면에서 전체 화면 팝업 창 열기

이 기능은 사용자가 컴퓨터에 연결한 모든 화면에 관한 정보를 가져올 수 있는 Window Management API와 함께 빛을 발합니다. 예를 들어 사용자의 현재 화면이 아닌 다른 화면에서 전체 화면 팝업 창을 열려면 먼저 다른 화면을 찾은 다음 availLeft, availTop, availWidth, availHeight 값을 windowFeatures 문자열의 상응하는 left, top, width, height 값에 전달해야 합니다.


document.querySelector('.fullscreen-popoup-button-other-screen').addEventListener('click', async (e) => {
  const screenDetails = await window.getScreenDetails();
  ​​const otherScreen = screenDetails.screens.find(s => s !== screenDetails.currentScreen);
  window.open('https://example.com/popup.html', '_blank', `left=${otherScreen.availLeft},` +
      `top=${otherScreen.availTop},` +
      `width=${otherScreen.availWidth},` +
      `height=${otherScreen.availHeight},` +
      `fullscreen`);
});

데모

데모에서 전체 화면 팝업 창을 사용해 보고 소스 코드를 확인하세요. 전체 화면 체크박스와 전체 화면 팝업 버튼을 선택하고, 가능하면 기기에 여러 화면이 연결된 데모를 사용해 보세요.

감사의 말

이 자료는 Brad Triebwanser, Hakan Isbiliroglu, Mike Wasserman, Rachel Andrew가 검토했습니다.