HTML5---16.全屏接口的使用

最新推荐文章于 2023-09-22 18:52:13 发布

转载最新推荐文章于 2023-09-22 18:52:13 发布 · 58 阅读

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/Tobenew/p/10508785.html

本文详细介绍了HTML5中用于控制全屏模式的API，包括requestFullScreen()方法用于进入全屏，cancelFullScreen()方法用于退出全屏，以及fullScreenElement属性用于判断当前是否处于全屏状态。文章通过实例代码展示了如何在不同浏览器环境下正确调用这些API。

全屏操作的主要方法和属性
1.requestFullScreen();开启全屏显示
*不同浏览器需要添加不同的前缀
*Chrome:webkit    firefox:moz    ie:ms    opera:o    
2.cancelFullScreen():退出全屏显示
3.fullScreenElement:是否是全屏状态

<div>
    <img src="https://i-blog.csdnimg.cn/blog_migrate/7beec783787a40342f6ee4f5e4c419bc.png" alt="">
    <input type="button" id="full" value="全屏">
    <input type="button" id="cancelFull" value="退出全屏">
    <input type="button" id="isFull" value="是否全屏">
</div>
<script>
    /*全屏操作的主要方法和属性
    * 1.requestFullScreen():开启全屏显示
    *   不同浏览器需要添加不同的前缀
    *   chrome:webkit   firefox:moz   ie:ms   opera:o
    * 2.cancelFullScreen():退出全屏显示:也添加前缀，在不同的浏览器下.退出全屏只能使用document来实现
    * 3.fullScreenElement:是否是全屏状态，也只能使用document进行判断*/

    window.onload=function(){
        var div=document.querySelector("div");
        /*添加三个按钮的点击事件*/
        /*全屏操作*/
        document.querySelector("#full").onclick=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").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(){
            /*两个细节：使用document判断  能力测试*/
            if(document.fullscreenElement || document.webkitFullscreenElement || document.mozFullScreenElement || document.msFullscreenElement){
                alert(true);
            }
            else{
                alert(false);
            }
        }
    }
</script>