HTML5--浏览器全屏操作、退出全屏、是否全屏

爱被打了一巴掌 2021-10-23 14:12 741阅读 0赞

[HTML5--浏览器全屏操作、退出全屏、是否全屏][HTML5--]

<!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>
        /*全屏操作的主要方法和属性
        * 1.requestFullScreen():开启全屏显示
        *   不同浏览器需要添加不同的前缀
        *   chrome:webkit   firefox:moz   ie:ms   opera:o
        * 2.cancelFullScreen():退出全屏显示:也添加前缀，在不同的浏览器下.退出全屏只能使用document来实现
        * 3.fullScreenElement:是否是全屏状态，也只能使用document进行判断*/
    
        window.οnlοad=function(){
            var div=document.querySelector("div");
            /*添加三个按钮的点击事件*/
            /*全屏操作*/
            document.querySelector("#full").οnclick=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").οnclick=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").οnclick=function(){
                /*两个细节：使用document判断  能力测试*/
                if(document.fullscreenElement || document.webkitFullscreenElement || document.mozFullScreenElement || document.msFullscreenElement){
                    alert(true);
                }
                else{
                    alert(false);
                }
            }
        }
    </script>
    </body>
    </html>

posted on 2019-08-08 16:34 [eadela][] 阅读( ...) 评论( ...) [编辑][Link 1] 收藏

转载于:https://www.cnblogs.com/eadela/p/11322037.html

[HTML5--]: https://www.cnblogs.com/eadela/p/11322037.html
[eadela]: https://www.cnblogs.com/eadela/
[Link 1]: https://i.cnblogs.com/EditPosts.aspx?postid=11322037