투케이2K

335. (javaScript) 자바스크립트 requestFullscreen , exitFullscreen 사용해 브라우저 전체 화면 수행 및 전체 화면 종료 실시 본문

JavaScript

335. (javaScript) 자바스크립트 requestFullscreen , exitFullscreen 사용해 브라우저 전체 화면 수행 및 전체 화면 종료 실시

투케이2K 2023. 10. 18. 20:48

[개발 환경 설정]

개발 툴 : Edit++

개발 언어 : JavaScript

 

[소스 코드]

 

        // --------------------------------------------------------------------------------------------------------------

        // [html 최초 로드 및 이벤트 상시 대기 실시] 
        window.onload = async function() {
            console.log("");
            console.log("=========================================");
            console.log("[window onload] : [start]");
            console.log("=========================================");
            console.log(""); 


            /**
             * --------------------------------------------------- 
             * [요약 설명]
             * ---------------------------------------------------
             * 1. document.documentElement.requestFullscreen() : [표준 사양] 브라우저에 포함된 전체 Dom 요소를 지정해 전체 화면으로 표시합니다
             * ---------------------------------------------------
             * 2. document.exitFullscreen() : [표준 사양] 전체 화면된 것을 종료합니다
             * ---------------------------------------------------
             * 3. 참고 : 
             * 
             * - 해당 전체 화면 수행 및 종료 메소드는 표준이지만, 브라우저 마다 지원되는 것이 다르기 때문에 분기 처리가 필요할 수 있습니다
             * - 해당 전체 화면 및 종료 메소드 수행 시 보안상의 이유로 자동으로 호출할 수 없습니다 
             *   (사용자 작업에 의해서 호출 필요 : 버튼 클릭 이벤트 내에서 해당 함수 동작)
             * ---------------------------------------------------
            **/


            // [body 지정]
            var body = document.body


            // [클릭 이벤트 등록]
            body.onclick = function() {
    			console.log("");
                console.log("=========================================");
                console.log("[window onload] : [body] : click");
                console.log("=========================================");
                console.log(""); 
                
                if (!document.fullscreenElement) { // [전체 화면이 아닌 경우]
                    document.documentElement.requestFullscreen() // [전체 화면 전환]
                } else {
                    document.exitFullscreen() // [전체 화면 종료]
                }

    		}

        };

        // --------------------------------------------------------------------------------------------------------------

 

반응형
Comments