HTML5 网络监听,全屏

1.网络状态监听

online事件：网络连通是触发
offline事件：网络断开时触发
注意：只有网络状态发生改变时才会触发

<script>
    // 监听网络连接
    window.addEventListener("online",function(){
        console.log("网络连通了")
    })
    // 监听网络断开
    window.addEventListener("offline",function(){
        console.log("网络断开了")
    })
</script>

这个例子中，本来网络一直都是连通的，什么也不会触发。手动把网线拔了，控制台打印"网络连通了"，说明触发了online事件，接着手动 重新连上网线，接着控制台又打印"网络断开了",说明触发了offline事件

2.全屏接口

HTML5的api可以将某个Dom元素全屏展示。
开启/关闭全屏显示的方法：
W3C 提议（chrome，火狐已支持 2019-9-29）：
element.requestFullscreen()
document.exitFullscreen()
chrome：
webkitRequestFullScreen() or webkitRequestFullscreen()
webkitCancelFullScreen()
火狐浏览器：
mozRequestFullScreen()
mozCancelFullScreen()
IE11（IE10及以下不支持）：
msRequestFullscreen()
msExitFullscreen()
注意：退出全屏只能使用document来实现

document.fullscreenEnabled属性：返回一个布尔值,表明浏览器是否支持全屏模式
W3C提议（截至至今，谷歌，火狐均已支持 2019-9-29）：
document.fullscreenEnabled
chrome浏览器：
document.webkitFullscreenEnabled
火狐浏览器：
document.mozFullScreenEnabled
IE11（IE10及以下不支持）：
document.msFullscreenEnabled

document.fullscreenElement该属性返回当前处于全屏模式的DOM元素。
IE11为 document.msFullscreenElement

封装进入全屏和退出全屏的函数

<script>
    // 封装进入全屏的函数
    function fullScreen(node){
        // 判断浏览器是否支持全屏api
        if(document.fullscreenEnabled || document.msFullscreenEnabled){
            // 兼容IE
            if(node.requestFullscreen){
                // chrome和火狐
                node.requestFullscreen()
            }else if(box.msRequestFullscreen){
                // IE11
                node.msRequestFullscreen()
            }
        }else{
            alert("当前浏览器不支持全屏模式")
        }
    }

    // 封装退出全屏的函数（直接esc键最简单）
    function exitfullScreen(){
        //判断是否已经进入全屏模式
        var fullscreenElement = document.fullscreenElement || document.msFullscreenElement
        if(!fullscreenElement){
            //console.log("不是全屏状态")
            return
        }
        // 如果非全屏状态调用下面的代码会弹警告
        if(document.exitFullscreen){
            document.exitFullscreen()
        }else if(document.msExitFullscreen){
            document.msExitFullscreen()
        }
    }
</script>

HTML5 网络监听,全屏

原文：https://www.cnblogs.com/OrochiZ-/p/11610546.html