一、JavaScript 控制瀏覽器全屏

HTML 5中的full screen，目前可以在除IE和opera外的瀏覽器中使用 ，有的時候用來做全屏API，遊戲呀，等都很有用。先看常見的API

 element.requestFullScreen()   作用：請求某個元素element全屏

Document.getElementById(“myCanvas”).requestFullScreen()

這裡是將其中的元素ID去請求fullscreen

退出全屏

  document.cancelFullScreen()

注意：

1.在HTML5中,W3C制定了關於全屏的API但是隻能由使用者事件觸發，所以不能自動全屏；使用者事件觸發方可。

2.新版本，瀏覽器都支援了全屏api，不需要帶字首，為相容性可以帶著。

二、JS全屏API使用案例

1.html

    <p>
        測試內容，站位使用
    </p>
    <div id="testOne">
        <input type="text" value="點選綠色局域，該區域將全屏" style="width: 100%;">
        <hr>
        <button
 
>點選退出全屏</button>

        <hr>
        <input type="text" id="txtOne">
    </div>

2.js

指定元素全屏

var $fullScreen = document.querySelector('#testOne');//按鈕 
if ($fullScreen) {
    $fullScreen.addEventListener("click", function () {
        //指定元素則元素全屏
        //指定  = document.documentElement  則整個頁面全屏
 

        var docElm = $fullScreen;
        if (docElm.requestFullscreen) {
            docElm.requestFullscreen();
        }
        else if (docElm.msRequestFullscreen) {
            docElm.msRequestFullscreen();
        }
        else if (docElm.mozRequestFullScreen) {
            docElm.mozRequestFullScreen();
        }
        else if (docElm.webkitRequestFullScreen) {
            docElm.webkitRequestFullScreen();
        }

    }, false);
}

取消全屏

var $cancelFullScreen = document.querySelector("button");
if ($cancelFullScreen) {
    $cancelFullScreen.addEventListener("click", function () {
        //取消全屏需要 document
        if (document.exitFullscreen) {
            document.exitFullscreen();
        }
        else if (document.msExitFullscreen) {
            document.msExitFullscreen();
        }
        else if (document.mozCancelFullScreen) {
            document.mozCancelFullScreen();
        }
        else if (document.webkitCancelFullScreen) {
            document.webkitCancelFullScreen();
        }
    }, false);
}

判斷全屏、獲取全屏元素

//判斷是否是全屏
document.querySelector('#txtOne').onclick=function(){
    console.info(document.fullscreen);
    //獲取全屏的元素物件
    console.info( document.fullscreenElement);
}

效果圖：

三、全屏模式下控制CSS樣式

css

   :fullscreen input{
            background: hotpink;
        }

更多相容處理：

-webkit-full-screen {
 
 /* properties */
}
:-moz-full-screen {
 /* properties */
}
:-ms-fullscreen {
 /* properties */
}
:full-screen { /*pre-spec */
 /* properties */
}
:fullscreen { /* spec */
 /* properties */
}
/* deeper elements */
:-webkit-full-screen video {
 width: %;
 height: %;
}
/* styling the backdrop*/
::backdrop {
 /* properties */
}
::-ms-backdrop {
 /* properties */
}

更多：

JavaScript Promise 物件使用講解

JavaScript Error物件整理_JavaScript 異常處理整理

JavaScript 拒絕事件冒泡，拒絕預設操作 整理