HTML5API之全屏

最新推荐文章于 2021-07-27 20:12:17 发布

chongyoulan0795

最新推荐文章于 2021-07-27 20:12:17 发布

阅读量135

点赞数

原文链接：https://my.oschina.net/heartwalker/blog/678252

版权

基本属性

HTML5规范允许用户自定义网页上任一元素全屏显示

requestFullScreen(); //开启全屏显示
cancleFullScreen();  //关闭全屏显示

但是由于浏览器的实现与兼容性的问题, 目前需要这样来使用它们

element.webkitRequestFullScreen()
element.mozRequestFullScreen()

上述代码会将 element 元素全屏, 即非element元素会被隐藏规范允许所有元素可以取消全屏，但实际测试结果关闭全屏只能添加到 document 元素上, 使用其他元素会报错

 document.webkitCancelFullScreen()
 document.mozCancelFullScreen()

全屏检查

可以通过下面代码检测当前是否处于全屏状态

document.fullScreen;

不同浏览器仍然需要添加前缀

document.webkitIsFullScreen;
document.mozFullScreen;

全屏伪类

还有一个全屏伪类, 可以设置全屏状态下的样式

:full-screen 
:-webkit-full-screen
:moz-full-screen

注

目前标准写法仍未被实现,使用标准方法会报错(至少在pc端是这样)

chrome下测试代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>全屏</title>
    <style>
        .box {
            width: 200px;
            height: 200px;
            background: blue;
        }

        :-webkit-full-screen .box {
            background-color: red;
            width: 300px;
            height: 300px;
        }
        .cl{
            width: 100px;
            height: 100px;
            background-color: gold;
        }
    </style>
</head>
<body>
    <div class="box"></div>
    <div class="cl"></div>
    <input type="button" class='open' value="全屏">
    <input type="button" class='cancle' value="关闭全屏">
    <script>
        var open = document.querySelector('.open');
        var cancle = document.querySelector('.cancle');
        var box = document.querySelector('.box');

        open.onclick = function () {
            document.documentElement.webkitRequestFullScreen();
            // box.webkitRequestFullScreen();
            alert(document.webkitIsFullScreen);
        }

        cancle.onclick = function () {
            alert(document.webkitIsFullScreen);
            document.webkitCancelFullScreen();
            // document.documentElement.webkitCancelFullScreen();
        }
    </script>
</body>
</html>

个人博客

转载于:https://my.oschina.net/heartwalker/blog/678252

chongyoulan0795

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML5API之全屏

基本属性HTML5规范允许用户自定义网页上任一元素全屏显示requestFullScreen(); //开启全屏显示cancleFullScreen(); //关闭全屏显示但是由于浏览器的实现与兼容性的问题, 目前需要这样来使用它们element.webkitRequestFul...
复制链接

扫一扫