HTML5-全屏接口-使用

全屏操作的主要方法和属性
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>
©️2020 CSDN 皮肤主题: 游动-白 设计师:上身试试 返回首页