前端开发中，实现类似于F11键的网页全屏功能(可对指定元素全屏)

pilot34

前端开发中，实现类似于F11键的网页全屏功能(可对指定元素全屏)

使用全屏API实现网页类似于F11的全屏功能，目前在Firefox、谷歌Chrome、Safari、Opera和IE 11+中实现。
话不多说，直接上代码。
一、首先在js部分封装触发全屏、取消全屏的方法

[JavaScript] 纯文本查看 复制代码

// 全屏功能类似于网页F11键
// 设置全屏 elementId参数为指定要全屏的某个元素的id 无参数时默认网页全屏
//设置全屏
function setFullScreen(elementId) {
    let docElm = null;
    if (elementId) {
        docElm = document.getElementById(elementId);

    } else {
        docElm = document.documentElement;
    }
    //Chrome等
    if (docElm.webkitRequestFullScreen) {
        docElm.webkitRequestFullScreen();
    }
    //W3C
    else if (docElm.requestFullscreen) {
        docElm.requestFullscreen();
    }
    //IE11
    else if (docElm.msRequestFullscreen) {
        docElm = document.body; //overwrite the element (for IE)
        docElm.msRequestFullscreen();
    }
    //FireFox
    else if (docElm.mozRequestFullScreen) {
        docElm.mozRequestFullScreen();
    }


}
//取消全屏，按esc也可以取消全屏
function closeFullScreen() {
    if (document.exitFullscreen) {
        document.exitFullscreen();
    }
    else if (document.msExitFullscreen) {
        document.msExitFullscreen();
    }
    else if (document.mozCancelFullScreen) {
        document.mozCancelFullScreen();
    }
    else if (document.webkitCancelFullScreen) {
        document.webkitCancelFullScreen();
    }

// 监听全屏状态
var fullscreenState = document.getElementById("fullscreen-state");
if (fullscreenState) {
    document.addEventListener("fullscreenchange", function () {
        fullscreenState.innerHTML = (document.fullscreenElement) ? "" : "not ";
    }, false);

    document.addEventListener("msfullscreenchange", function () {
        fullscreenState.innerHTML = (document.msFullscreenElement) ? "" : "not ";
    }, false);

    document.addEventListener("mozfullscreenchange", function () {
        fullscreenState.innerHTML = (document.mozFullScreen) ? "" : "not ";
    }, false);

    document.addEventListener("webkitfullscreenchange", function () {
        fullscreenState.innerHTML = (document.webkitIsFullScreen) ? "" : "not ";
    }, false);
}}

二、其次在html部分编写绑定DOM，demo如下：

[HTML] 纯文本查看 复制代码

 
 <p>
    <button id="view-fullscreen">全屏</button>
    <button id="cancel-fullscreen">取消全屏</button>
</p>
<p>全屏状态: 现在是 <b id="fullscreen-state"> not </b> 全屏</p>
<h2>指定某个元素全屏</h2>
<p>可以使指定的某个元素全屏，例如：一段例子视频：</p>
<video id="mario-video" controls width="320">
    <source src="http://video.699pic.com/videos/64/15/10/zRNBGCCm9wh41526641511_10s.mp4">
</video>
<p>
   <button id="video-fullscreen">视频全屏</button>
</p>

html代码块有部分跟传上去的源代码有点不一样，按钮的点击事件没给放上去，应该是帖子的html代码快编辑部分只能写html，嵌入的js点击事件自动给屏蔽了。
这里自己看着js部分的方法函数给对应按钮绑定一下点击事件就OK了。

三、最后
最后，效果图片就不放了，全屏的图也不好展示，因为展示不出来啥，感兴趣的朋友自己去实践尝试一下全屏的实现，体验会更好吧。
好啦，记录完毕。
如有不当之处，请指正，共同进步。