JooTCFailed to execute ‘requestFullscreen’ on ‘Element’
자바스크립트를 사용하여 브라우저 창을 전체화면으로 전환하려 할 때 다음과 같은 경고 메세지가 발생하며 전체화면으로 전환되지 않는 경우가 있습니다.
my_common_scripts.js:93 Failed to execute 'requestFullscreen' on 'Element': API can only be initiated by a user gesture.
대부분의 인터넷 브라우저에서는 보안을 위해 몇몇 제어가 일어나는 사항에 대해 페이지 스크립트에 의해 강제되지 않도록 제한합니다. 예를 들어 다음과 같은 행위에 대해서 페이지는 민감하게 반응할 것입니다.
- 전체화면 전환
- 카메라 및 마이크의 사용
- 플래시(Flash) 콘텐츠의 실행
- USB 또는 클립보드 콘텐츠의 사용
이외에도 로컬 PC의 일부 파일을 처리하거나 브라우저의 인터페이스를 변환하는 행위는 보안상 좋지 않기 때문에 사용자가 결정하고 “직접” 허가를 해야 합니다.
따라서 전체화면으로 전환시키기 위해서는 페이지에 접속만 하면 되는 것이 아니라, 특정한 버튼을 클릭하거나 권한을 허가하는 등의 과정을 거쳐야만 해당 스크립트 함수를 사용할 수 있게 되는 것입니다.
올바른 사용의 예시
예를 들자면 다음과 같이 전체화면을 강제로 전환하려 했다고 가정해보겠습니다.
<!DOCTYPE HTML>
<html>
<head>
<script>
function onLoadFunction() {
var docV = document.documentElement;
if (docV.requestFullscreen) docV.requestFullscreen();
else if (docV.webkitRequestFullscreen) // Chrome, Safari (webkit)
docV.webkitRequestFullscreen();
else if (docV.mozRequestFullScreen) // Firefox
docV.mozRequestFullScreen();
else if (docV.msRequestFullscreen) // IE or Edge
docV.msRequestFullscreen();
}
</script>
</head>
<body onLoad="onLoadFunction();">
This is Test Page.
(Nothing Here)
</body>
</html>
이 페이지에 접속하게 되면 onLoad 속성에 의해 onLoadFunction() 함수가 즉시 실행될 것입니다.
(전체화면 전환 함수는 다음 포스트에 설명되어 있습니다. : https://jootc.com/p/201811062182)
그러나 이 함수에는 전체화면 제어와 같은 민감한 함수가 들어있습니다. 따라서 이 함수는 자동으로 실행되었기 때문에 브라우저에 의해 차단될 것입니다. 다음과 같은 에러와 같이 말이죠.
이러한 문제를 해결하기 위해서는 전체화면 전환 함수의 자동 실행 보다는 사용자 선택의 의무를 부여해야 하며 사용자가 직접 실행하게 하는 동작이 되도록 수정해야 합니다.
다음과 같이 onLoad를 제거했습니다. 또한 ‘전체화면 전환’ 버튼을 추가했고 button 태그를 사용하여 클릭 시 자바스크립트 함수를 실행할 수 있도록 하였습니다.
<body>
This is Test Page.
<button class="my-button-style" onclick="openFullscreen()">전체화면 전환</button>
</body>
openFullscreen() 함수의 내용은 사실 상단의 onLoadFunction() 함수와 동일합니다. 단지 버튼 클릭으로 해당 함수가 실행되는 구조로 바뀌었을 뿐입니다.
이제 ‘전체화면 전환’ 버튼을 클릭하면 더 이상 경고를 표시하지 않고 브라우저가 전체화면으로 바뀔 것입니다.
참고자료
- Run a website in fullscreen mode – https://stackoverflow.com/questions/29281986/run-a-website-in-fullscreen-mode