<body>
    <button id="fullscreen-toggler">全屏按钮</button>
    <script src="./js/jquery.js"></script>
    <script>
        // 设置全屏
        let flag = false
        document
            .getElementById('fullscreen-toggler')
            .addEventListener('click', function (e) {
                var element = document.documentElement // 返回 html dom 中的root 节点 <html>
                if (!flag) {
                    flag = true
                    // 判断浏览器设备类型
                    if (element.requestFullscreen) {
                        element.requestFullscreen()
                    } else if (element.mozRequestFullScreen) {
                        // 兼容火狐
                        element.mozRequestFullScreen()
                    } else if (element.webkitRequestFullscreen) {
                        // 兼容谷歌
                        element.webkitRequestFullscreen()
                    } else if (element.msRequestFullscreen) {
                        // 兼容IE
                        element.msRequestFullscreen()
                    }
                } else {
                    //  退出全屏
                    if (document.exitFullscreen) {
                        document.exitFullscreen()
                    } else if (document.mozCancelFullScreen) {
                        document.mozCancelFullScreen()
                    } else if (document.webkitCancelFullScreen) {
                        document.webkitCancelFullScreen()
                    } else if (document.msExitFullscreen) {
                        document.msExitFullscreen()
                    }
                }
            })
        
    </script>
</body>