HTML5-全屏接口-使用

最新推荐文章于 2023-08-16 12:55:42 发布

943学前端

最新推荐文章于 2023-08-16 12:55:42 发布

阅读量171

点赞数

分类专栏： HTML5笔记文章标签： javascript html5

本文链接：https://blog.csdn.net/weixin_49924309/article/details/107852158

版权

HTML5笔记专栏收录该内容

16 篇文章 0 订阅

订阅专栏

全屏操作的主要方法和属性
1.requestFullScreen():开启全屏显示
不同浏览器需要添加不同的前缀
chrome：webkit firefox:moz ie:ms opera:o
2.cancelFullScreen():退出全屏显示 :也要添加前缀，在不同的浏览器下，退出全屏只能使用document来实现
3.fullScreenElement:是否是全屏状态，也只能使用document进行判断

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div>
        <img src="../img/2.png" alt="" width="300" height="300">
        <input type="button" id="full" value="全屏">
        <input type="button" id="cancelFull" value="退出全屏">
        <input type="button" id="isFull" value="是否全屏">
    </div>
    <script>
     
        window.onload = function() {
         	 /* 添加三个按钮的点击事件 */
            var div = document.querySelector("div");
      
            // /* 全屏操作 */
            document.querySelector("#full").onclick = function() {
              
                // /* 使用能力测试添加不同浏览器下的前缀 */
                if (div.requestFullScreen) {
                    div.requestFullScreen();
                } else if (div.webkitRequestFullScreen) {
                    div.webkitRequestFullScreen();
                } else if (div.mozRequestFullScreen) {
                    div.mozRequestFullScreen();
                } else if (div.msRequestFullScreen) {
                    div.msRequestFullScreen();
                }
            }


            // 推出全屏操作
            document.querySelector("#cancelFull").onclick = function() {

                if (document.cancelFullScreen) {
                    document.cancelFullFullScreen();
                } else if (document.webkitCancelFullScreen) {
                    document.webkitCancelFullScreen();
                } else if (document.mozCancelFullScreen) {
                    document.mozCancelFullScreen();
                } else if (document.msCancelFullScreen) {
                    documentiv.msCancelFullScreen();
                }
            }

            // 判断是否是全屏状态
            document.querySelector("#isFull").onclick = function() {
                // 两个细节：使用document判断 能力测试
                if (document.fullscreenElement || document.webkitFullscreenElement || document.mozFullScreenElement || document.msFullscreenElement) {
                    alert(true);
                    console.log(1);
                } else {
                    alert(false);
                }
            }
        }
    </script>
</body>

</html>

943学前端

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML5-全屏接口-使用

全屏操作的主要方法和属性1.requestFullScreen():开启全屏显示不同浏览器需要添加不同的前缀chrome：webkit firefox:moz ie:ms opera:o2.cancelFullScreen():退出全屏显示 :也要添加前缀，在不同的浏览器下，退出全屏只能使用document来实现3.fullScreenElement:是否是全屏状态，也只能使用document进行判断<!DOCTYPE html><html lang="
复制链接

扫一扫