HTML5 network monitoring, full screen

1. monitor network status

online events: network connectivity is triggered
offline event: Triggered when disconnected from the network
Note: The network will only be triggered when the state changes

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

In this example, the network had always been connected, nothing will trigger. Manually pull the network cable, the console print "network connectivity" and explained triggered online event, and then manually re-connect the network cable, and then print the console "Network disconnected", explained triggered offline event

2. Full Screen Interface

The api HTML5 can be a full-screen display Dom element.
On / off full screen method:
the W3C proposal (chrome, Firefox has support 2019-9-29):
element.requestFullscreen ()
document.exitFullscreen ()
Chrome:
webkitRequestFullScreen () or webkitRequestFullscreen ()
webkitCancelFullScreen ()
Firefox:
mozRequestFullScreen ()
mozCancelFullScreen ()
IE11 (IE10 and below are not supported):
msRequestFullscreen ()
msExitFullscreen ()
Note: exit full screen can only be achieved using a document

document.fullscreenEnabled property: returns a Boolean value indicating whether the browser supports full-screen mode
W3C proposal (as of now, Google, Firefox is already supported by 2019-9-29):
document.fullscreenEnabled
Chrome browser:
document.webkitFullscreenEnabled
Firefox:
document.mozFullScreenEnabled
IE11 (IE10 and below are not supported):
document.msFullscreenEnabled

This property returns the current document.fullscreenElement DOM element in full screen mode.
IE11 is document.msFullscreenElement

Packaging enter full-screen and full-screen function exit

<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>