HTML5 网络监听,全屏

1.网络状态监听

• online事件：网络重新连通时触发
• offline事件：网络断开时触发

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

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

2.全屏接口

• HTML5的api可以将某个Dom元素全屏展示，通过api或者Esc键可退出全屏
• 也可以通过快捷按键让页面进入全屏（chrome，EDGE,火狐都素按F11切换全屏/退出全屏）,两种模式是独立的，什么模式进入全屏，就需要对应模式的退出方式
• fullscreenchange事件用来监听全屏事件（仅限api模式，通过快捷按键的形式无法监听）
• document.fullscreenElement（IE11/msFullscreenElement）该属性返回当前处于全屏模式的DOM元素，可以根据他来判断是否进入了全屏模式

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

• 封装一个兼容各个浏览器的全屏函数

<script>
    // 封装进入全屏的函数
    function fullScreen(node){
        // 判断浏览器是否支持全屏api
        if(document.fullscreenEnabled || document.msFullscreenEnabled){
            // 判断是标准浏览器还是IE
            if(node.requestFullscreen){
                // chrome和火狐
                node.requestFullscreen()
            }else if(node.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){
            //IE浏览器
            document.msExitFullscreen()
        }
    }
</script>

• 如果确定要通过api让整个页面全屏，可以屏蔽浏览器自带的快捷按钮全屏（F11）

//屏蔽浏览器自带的全屏
window.addEventListener('keydown',function(e){
     //如果按的是F11,则阻止默认事件
     if(e.keyCode == 122){
          e.preventDefault()
     }
})