자바스크립트를 사용하여 브라우저 창을 전체화면으로 전환하려 할 때 다음과 같은 경고 메세지가 발생하며 전체화면으로 전환되지 않는 경우가 있습니다.
my_common_scripts.js:93 Failed to execute 'requestFullscreen' on 'Element': API can only be initiated by a user gesture.
대부분의 인터넷 브라우저에서는 보안을 위해 몇몇 제어가 일어나는 사항에 대해 페이지 스크립트에 의해 강제되지 않도록 제한합니다. 예를 들어 다음과 같은 행위에 대해서 페이지는 민감하게 반응할 것입니다.
이외에도 로컬 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" >
openFullscreen() 함수의 내용은 사실 상단의 onLoadFunction() 함수와 동일합니다. 단지 버튼 클릭으로 해당 함수가 실행되는 구조로 바뀌었을 뿐입니다.
이제 ‘전체화면 전환’ 버튼을 클릭하면 더 이상 경고를 표시하지 않고 브라우저가 전체화면으로 바뀔 것입니다.
참고자료
리눅스 명령어 - kill, killall 리눅스 kill 명령어는 특정 프로세스를 종료해주는 명령어입니다. 백그라운드에서 실행되고 있는…
JavaScript는 역사가 긴 스크립트 프로그래밍 언어입니다. 세월이 흐르면서 많은 자바스크립트 표준이 만들어졌고, 현재는 많은 문법적…
NodeJS 테스트 프레임워크인 Mocha는 비동기 테스트를 지원합니다. 간혹 특정 테스트 스크립트를 작성하고 실행하면 아래와 같이…
언제부턴가 윈도우 11을 처음 설치할 때 마이크로소프트(Microsoft) 계정 로그인을 강제로 요구하게 되었습니다. 물론 마이크로소프트 계정이…
애플 에어팟 프로 2 (AirPods Pro 2) 케이스에는 스피커가 내장되어 있습니다. 그런데 간혹 아무 것도…