JavaScript 操作瀏覽器全屏整理_Js 控制瀏覽器全屏處理

一、JavaScript 控制瀏覽器全屏

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

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

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

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

退出全屏

  document.cancelFullScreen()

 

document.fullscreen  ,如果用戶在全屏模式下，則返回true

 

document.fullscreenElement,返回當前處於全屏模式下的元素

 

注意：

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 拒絕事件冒泡，拒絕默認操作 整理