---
tags: Javascript, Frontend
---
# JS實現部分區域全螢幕即退出

## 1. 首先找出要全螢幕區域

`var elem = document.getElementById("game");`

## 2. 建立全螢幕function

// 局部全螢幕
function requestFullScreen(element) {
    var requestMethod =
        element.requestFullScreen ||
        element.webkitRequestFullScreen ||
        element.mozRequestFullScreen ||
        element.msRequestFullScreen;
    if (requestMethod) {
        requestMethod.call(element);
    } else if (typeof window.ActiveXObject !== "undefined") {
        var wscript = new ActiveXObject("WScript.Shell");
        if (wscript !== null) {
            wscript.SendKeys("{F11}");
        }
    }
}

## 3. 將選到element區塊全螢幕

`requestFullScreen(elem);`

## 4. 退出全螢幕函數

function exitFullscreen() {
    if (document.exitFullscreen) {
        document.exitFullscreen();
    } else if (document.msExitFullscreen) {
        document.msExitFullscreen();
    } else if (document.mozCancelFullScreen) {
        document.mozCancelFullScreen();
    } else if (document.webkitExitFullscreen) {
        document.webkitExitFullscreen();
    }
}

## 5. 監聽按鈕事件

我是設置一個是否為全螢幕的變數去跑，這樣就只需要一個按鈕就可以解決

var btn = document.getElementById("btn"); // 尋找button id=btn的按鈕
btn.onclick = function () { // 監聽btn按鈕click事件
　　var elem = document.getElementById("content"); // 要全螢幕的element id
　　requestFullScreen(elem); // 全螢幕
};
 

var close = document.getElementById("close"); // 尋找button id=close的按鈕
close.onclick = function () { // 監聽close按鈕click事件
    exitFullscreen(); // 關閉全螢幕
};    


---

// 以下由一個button完成
var fullscreen = false;
var btn = document.getElementById("btn");
var elem = document.getElementById("content");
btn.onclick = function () {
    if(fullscreen){
        exitFullscreen();
        fullscreen = false;
    }else{
　　    requestFullScreen(elem);
        fullscreen = true;
    }
};