html5-api——网络监听接口、全屏接口

版权声明：未经同意，不得随意转载转载 https://blog.csdn.net/lucky541788/article/details/86673359

网络监听接口

/*1.ononline：网络连通的时候触发这个事件*/
    window.addEventListener('online', function () {
        alert('网络连通了')
    });

    /*2.onoffline：网络断开时触发*/
    window.addEventListener('offline', function () {
        alert('网络断开了')
    })

全屏接口

全屏操作的主要方法和属性

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

<div>
    <img src="../images/beauty.jpg" alt="" width="500">
    <button class="full">全屏</button>
    <button class="cancelFull">退出全屏</button>
    <button class="isFull">是否全屏</button>
</div>

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.cancelFullscreen();
            } else if (document.webkitCancelFullScreen) {
                document.webkitCancelFullScreen();
            } else if (document.mozCancelFullScreen) {
                document.mozCancelFullScreen();
            } else if (document.msCancelFullScreen) {
                document.msCancelFullScreen();
            }
        };

        /*判断是否是全屏状态*/
        document.querySelector('.isFull').onclick = function () {
            if (document.fullscreenElement || document.webkitFullscreenElement || document.mosFullScreenElement || document.msFullscreenElement) {
                alert(true)
            } else {
                alert(false)
            }
        }
    };