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 */
}