H5网络监听接口和全屏接口

最新推荐文章于 2024-03-16 17:23:32 发布

Ron韦斯莱

最新推荐文章于 2024-03-16 17:23:32 发布

阅读量539

点赞数

本文链接：https://blog.csdn.net/qq_43537987/article/details/89385916

版权

本文介绍了H5中用于网络状态监听的ononline和onoffline事件，以及全屏显示的相关接口，包括requestFullScreen()、cancelFullScreen()和fullScreenElement属性。通过示例展示了如何实现点击按钮进行全屏切换和全屏状态判断。

摘要由CSDN通过智能技术生成

1.网络监听接口
/1.ononline:网络连通的时候触发这个事件/
/2.onoffline:网络断开时触发/

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

    /*2.onoffline:网络断开时触发*/
    window.addEventListener("offline",function(){
        alert("网络断开了");
    })
</script>

2.全屏接口
全屏操作的主要方法和属性
* 1.requestFullScreen():开启全屏显示
* 不同浏览器需要添加不同的前缀
* chrome:webkit firefox:moz ie:ms opera:o
* 2.cancelFullScreen():退出全屏显示:也添加前缀，在不同的浏览器下.退出全屏只能使用document来实现
* 3.fullScreenElement:是否是全屏状态，也只能使用document进行判断

案例：
需求：点击按钮1显示全屏，点击按钮2退出全屏，点击按钮3判断是否全屏。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div>
    <img src="../images/l1.jpg" alt="">
    <input type="button" id="full" value="全屏">
    <input type="button" id="cancelFull" value="退出全屏">
    <input type="button" id="isFull" value="是否全屏">
</div>
<script>
    window.function(){
        var div=document.querySelector("div");
        /*添加三个按钮的点击事件*/
        /*全屏操作*/
        document.querySelector("#full").function(){
            /*div.requestFullScreen();*/
            /*div.webkitRequestFullScreen();*/
            /*div.mozRequestFullScreen();*/
            /*使用能力测试添加不同浏览器下的前缀*/
            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").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").function(){
            /*两个细节：使用document判断  能力测试*/
            if(document.fullscreenElement || document.webkitFullscreenElement || document.mozFullScreenElement || document.msFullscreenElement){
                alert(true);
            }
            else{
                alert(false);
            }
        }
    }
</script>
</body>
</html>