JS 全屏和退出全屏详解及实例代码

效果图

JS 全屏和退出全屏详解及实例代码

 

 代码

<!DOCTYPE html>
<html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<body  >
<div id="content" style="height:500px;width:500px;background:#fff">
    <button id="btn" onclick="requestFullScreen()">全屏显示</button>
    <button id="btn2" onclick="exitFullScreen()">退出全屏</button>
    <h1>js控制页面的全屏展示和退出全屏显示</h1>
</div>
</body>
<script language="JavaScript">  
    var htmlDom = document.documentElement;
    //全屏显示
    function requestFullScreen() {
        var requestMethod =  htmlDom.webkitRequestFullScreen;//谷歌
        if (requestMethod) { 
            requestMethod.call(htmlDom);
        } 
    }
    //退出全屏
    function exitFullScreen(){
        var exitMethod = document.webkitExitFullscreen; //谷歌
        if (exitMethod) { 
            exitMethod.call(document);
        } 
    }
</script>
</html>

参考:https://www.jb51.net/article/96673.htm,连接下有各种浏览器的适配

JS 全屏和退出全屏详解及实例代码

上一篇:centos7环境下nodejs环境的部署过程


下一篇:Ceph集群部署及RGW开启https访问