HTML5全屏操作API

最新推荐文章于 2021-06-26 10:03:51 发布

weixin_30950607

最新推荐文章于 2021-06-26 10:03:51 发布

阅读量122

点赞数

原文链接：http://www.cnblogs.com/EricZLin/p/9256668.html

版权

一、定义：HTML5规范允许自定义网页上的任一元素全屏显示，存在兼容问题

二、使用：

①基本：

Node.RequestFullScreen（）开启全屏显示
Node.CancelFullScreen（）关闭全屏显示

②由于兼容性的原因（在IE9以下不支持，但是在高级浏览器新版本支持），不同浏览器需要添加不同的私有前缀（在js中也有私有前缀，在方法属性之前加上即可，并且首字母需大写）

webkit内核浏览器，如Chrome浏览器：以webkitRequestFullScreen方法实现，谷歌浏览器前缀webkitRequestFullScreen()里最后的Screen的S也可以为小写s，建议写成驼峰命名法

gecko内核浏览器，如火狐浏览器：以mozRequestFullScreen方法实现。

Trident内核浏览器，如IE浏览器：使用IE时，最后的screen的s为小写，也即msRequestFullscreen，否则无效

<script>
        // 将浏览器前缀兼容封装成函数
        function toFullVideo() {
            if (videoDom.requestFullscreen) {
                return videoDom.requestFullScreen();
            } else if (videoDom.webkitRequestFullScreen) {
                return videoDom.webkitRequestFullScreen();
            } else if (videoDom.mozRequestFullScreen) {
                return videoDom.mozRequestFullScreen();
            } else {
                return videoDom.msRequestFullscreen();
            }
        }
 </script>

③页面全屏（页面文档全屏）

document.documentElement.webkitRequestFullScreen()

④取消页面全屏（跟元素没有关系）

document.webkitCancelFullScreen;

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

<body>
    <div class="box"></div>
    <button class="btn1">全屏显示</button>
    <button class="btn2">取消全屏</button>
    <script>
        document.querySelector(".btn1").onclick = function () {
            document.documentElement.webkitRequestFullScreen();
        };
        document.querySelector(".btn2").onclick = function () {
            document.webkitCancelFullScreen();
        };
    </script>
</body>
</html>

转载于:https://www.cnblogs.com/EricZLin/p/9256668.html

weixin_30950607

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML5全屏操作API

一、定义：HTML5规范允许自定义网页上的任一元素全屏显示，存在兼容问题二、使用：①基本：Node.RequestFullScreen（）开启全屏显示Node.CancelFullScreen（）关闭全屏显示②由于兼容性的原因（在IE9以下不支持，但是在高级浏览器新版本支持），不同浏览器需要添加不同的私有前缀（在js中也有私有前缀，在方法属性之前加上即可，并且首字母需大...
复制链接

扫一扫