팝업 창을 전체 화면 모드로 열고 싶다고 가정해 보겠습니다. 지금까지 전체 화면 팝업 창을 여는 방법은 다음 두 단계로 이루어졌습니다.
- 기본 앱 창에서 팝업 창 열기 버튼 클릭과 같은 사용자 동작이 필요한
window.open()메서드를 호출합니다. - 팝업 창에서
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입니다. 두 번째 매개변수는 target이며 특수 값은 _blank입니다.
세 번째 매개변수는 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`);
});
데모
데모에서 전체 화면 팝업 창을 사용해 보고 소스 코드를 확인해 보세요. 전체 화면 체크박스와 전체 화면 팝업 버튼을 선택하고, 가능하면 기기에 여러 화면을 연결한 상태에서 데모를 재생해 보세요.