[JavaScript/Vue] 자바스크립트로 크롬 전체 화면 실행 및 종료하기

크롬 브라우저 전체화면 만들기

 

웹 애플리케이션을 구축할 때 모니터링 기능이 주요 기능이라면

전체 화면으로 하여 커다란 TV에 프로그램을 띄워놓고 보는 경우가 있다.

 

크롬에서는 사실 F11을 누르면 전체 화면이 되는 단축키가 있지만,

인터넷 환경에 익숙하지 않은 분들은 해당 기능이 있는지도 모르는 경우가 많다.

 

이런 분들을 위해서 애플리케이션에 내 크롬 전체 화면을 만들어주는 버튼으로 넣어줄 수 있다.

 

🌵버튼으로 크롬 전체 화면 만들어주기

샘플 코드

<template>
    <div>
        <button @click="fullPageChange" v-if="fullPage === false">전체 화면 켜기</button>
        <button @click="fullPageChange" v-if="fullPage === true">전체 화면 끄기</button>
    </div>
</template>
<script>
    export default {
        data() {
            return {
                fullPage: false,
            }
        },
        methods: {
            fullPageChange: function () {
                const documentElement = document.documentElement;
                if (document.fullscreenElement === null) {
                    //전체화면 아닌 상태
                    documentElement.requestFullscreen();
                    this.fullPage = true;
                } else {
                    //전체화면 상태
                    document.exitFullscreen();
                    this.fullPage = false;
                }
            }
        }
    }
</script>
<style>
    div {
        padding: 20px;
    }
</style>

vue.js에서 data에 전체 화면을 감지하는 fullPage라는 data를 만든 뒤

버튼에서 전체 화면일 경우 버튼을 각 상황에 맞게 보여준다.

 

해당 버튼 클릭 시 document.fullscreenElement상태를 확인한다.

만약 전체 화면 상태이면 해당 코드 안에 전체 화면이 적용된 코드가 들어오고

전체 화면 상태가 아니면 null을 반환한다.

 

if문 분기를 타서 각 전체 화면의 여부를 확인해서 전체 화면 실행, 종료 코드를 넣어준다.

• requestFullscreen() :  전체 화면을 실행한다.
• exitFullscreen() : 전체 화면을 종료한다

주의해야 하는 점은 requestFullscreen()은 document가 아니라 ducoment.documentElement에서 실행해야 하고,

exitFullscreen()은 document에서 실행해야 한다.

 

 

구현 화면

전체화면 코드 적용 화면