Day-1-全屏显示

最新推荐文章于 2024-08-02 20:00:50 发布

铭心NTeen

最新推荐文章于 2024-08-02 20:00:50 发布

阅读量132

点赞数

分类专栏： HTML5

本文链接：https://blog.csdn.net/qq_25238675/article/details/103152909

版权

HTML5 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

全屏显示

HTML5规范规定页面中的任何元素可以全屏显示
dom.requestFullScreen	dom开启全屏显示
document.cancelFullScreen	关闭全屏显示（只能是document这个对象调用）
document.isFullScreen	是否全屏

由于全屏显示功能在各浏览器的兼容性不同

所以不同的浏览器中需要加不同的兼容前缀

兼容前缀
谷歌	webkit
火狐	moz
欧朋浏览器	o
IE浏览器	ms

示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin:0;
            padding:0
        }
        img{
            width:200px;
            height:200px;
            background-color: pink;
        }
        /*全屏状态激活这个选择器*/
        #box:-webkit-full-screen{
            background:purple;
        }
    </style>
</head>
<body>

<div id="box">
    <img src="http://www.ixiupet.com/uploads/allimg/160823/1101224255-0.jpg" alt="">
    <button id="full">全屏显示</button>
    <button id="cancel">退出全屏</button>
    <button id="isFull">是否全屏</button>
</div>
<script>
    
    var oFull = document.getElementById('full')
    var oCancel = document.getElementById('cancel')
    var isFull = document.getElementById('isFull')
    var oImg = document.querySelector('img')

    var oBox = document.getElementById('box')

    oFull.onclick = function(){
        //浏览器的能力检测
       if(oBox.webkitRequestFullScreen){
           oBox.webkitRequestFullScreen()
       }else if(oBox.mozRequestFullScreen){
           oBox.mozRequestFullScreen()
       }else if(oBox.oRequestFullScreen){
           oImg.oRequestFullScreen()
       }else{
           oBox.msRequestFullScreen()
       }
    }

    oCancel.onclick = function(){
        document.webkitCancelFullScreen()
    }

    isFull.onclick = function () {
        alert(document.webkitIsFullScreen)
    }

</script>
</body>
</html>

铭心NTeen

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Day-1-全屏显示

全屏显示HTML5规范规定页面中的任何元素可以全屏显示 dom.requestFullScreen dom开启全屏显示 document.cancelFullScreen 关闭全屏显示（只能是document这个对象调用） document.isFullScreen 是否全屏由于全屏显示功能在各浏览器的兼容性不同所以不同的浏...
复制链接

扫一扫

专栏目录