【前端】【H5 API】实现全屏显示功能

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>萌狼蓝天 伴姬一生</title>
</head>
<body>
    <div>
        <img src="./source/img/dog.jpg" height="300" alt="">
        <button id="full">全屏显示</button>
        <button id="cancelFull">取消全屏</button>
        <button id="isFull">是否全屏</button>
        <p id="tip" style="color:blue"></p>
    </div>
    <script>
        //全屏显示
        var div = document.querySelector('div');
        document.querySelector('#full').onclick = function () {
            if (div.requestFullscreen) {
                div.requestFullscreen(); // 正常浏览器 
            } else if (div.webkitRequestFullScreen) {
                div.webkitRequestFullScreen(); // webkit 
            } else if (div.mozRequestFullScreen) {
                div.mozRequestFullScreen(); //早期火狐浏览器
            } else if (div.oRequestFullScreen) {
                div.oRequestFullScreen(); //早期Opera浏览器
            } else if (div.msRequestFullscreen) {
                div.msRequestFullscreen(); //早期IE浏览器
            } else {
                alert('暂不支持在您的浏览器中全屏');
            }
        };
        //取消全屏显示
        document.querySelector('#cancelFull').onclick = function () {
            if (document.exitFullscreen) {
                document.exitFullscreen(); // 正常浏览器 
            } else if (document.webkitCancelFullScreen) {
                document.webkitCancelFullScreen(); // webkit 
            } else if (document.mozCancelFullScreen) {
                document.mozCancelFullScreen(); //早期火狐浏览器
            } else if (document.oCancelFullScreen) {
                document.oCancelFullScreen(); //早期Opera浏览器
            } else if (document.msCancelFullscreen) {
                document.msCancelFullscreen(); //早期IE浏览器
            } else {
                alert('暂不支持在您的浏览器中全屏');
            }
            //可以用document，也可以用上方设置的变量 div
        };
        //检测当前是否处于全屏状态
        document.querySelector('#isFull').onclick = function () {
            // alert(document.webkitIsFullScreen); // webkit
            // 使用上面的弹窗方式。如果是处于全屏状态，会自动退出
            document.getElementById('tip').innerHTML=document.webkitIsFullScreen;
        };
    </script>
</body>
</html>