allowfullscreen 그리고 document.fullscreenEnabled
화면 내부에 삽입된 iframe에서 전체 화면 설정, 해제 기능을 구현하려고 한다.
구현은 생각보다 간단하다.
먼저 iframe 태그에 allowfullscreen 속성을 추가해야 한다.
allowfullscreen 속성을 갖는 iframe은 자바스크립트에서 제공하는 메서드를 통해 전체화면 설정, 해제가 가능하며 ESC도 사용할 수 있다.
<iframe src=”https://choonse.com” allowfullscreen />
전체 화면 설정 메서드 document.documentElement.requestFullscreen()
전체 화면 해제 메서드 document.exitFullscreen()
전체화면 설정/해제 버튼에 이벤트를 걸어서 사용할 수 있으며, 반환형은 Promise이다.
만약 allowfullscreen 속성이 없는 iframe에서 해당 메서드를 호출하면 어떻게 될까?disallowed by permissions policy 에러로 사람을 당황시킨다.
이 때는 allowfullscreen 속성의 존재 여부(true)를 체크해주면 되는데, 해당 속성은
document.fullscreenEnabled 속성을 사용해 true/false로 확인한다.
만약 iframe에 allowfullscreen 속성이 없을 때 전체 화면 버튼을 비활성화하고 싶을 때는 어떻게 할까?
document.fullscreenEnabled를 체크해서 활성/비활성을 결정하면 되는데 document is not defined와 같은 에러를 피하기 위해서는 useEffect 내부에서 해당 작업을 처리하여 렌더링이 완료된 시점에 document에 접근하도록 해야 한다.