首页 > Web开发 > 详细

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

时间:2020-10-15 12:10:48      阅读:26      评论:0      收藏:0      [点我收藏+]

效果图

技术分享图片

 

 代码

<!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 全屏和退出全屏详解及实例代码

原文:https://www.cnblogs.com/dzyany/p/13819439.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!