欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

全屏事件问题处理

程序员文章站 2022-04-15 22:36:34
...
先上代码


window.isflsgrn = false;//ie11以下是否进入全屏标志,true为全屏状态,false为非全屏状态
            window.ieIsfSceen = false;//ie11是否进入全屏标志,true为全屏状态,false为非全屏状态
            //跨浏览器返回当前 document 是否进入了可以请求全屏模式的状态
            function fullscreenEnable(){
                var isFullscreen = document.fullscreenEnabled ||
                window.fullScreen ||
                document.mozFullscreenEnabled ||
                document.webkitIsFullScreen;
                return isFullscreen;
            }
            //全屏
            var fScreen = function(){
                var docElm = document.documentElement;
                if (docElm.requestFullscreen) {
                    docElm.requestFullscreen();
                }
                else if (docElm.msRequestFullscreen) {
                    docElm.msRequestFullscreen();
                    ieIsfSceen = true;
                }
                else if (docElm.mozRequestFullScreen) {
                    docElm.mozRequestFullScreen();
                }
                else if (docElm.webkitRequestFullScreen) {
                    docElm.webkitRequestFullScreen();
                }else {//对不支持全屏API浏览器的处理,隐藏不需要显示的元素
                    window.parent.hideTopBottom();
                    isflsgrn = true;
                    $("#fsbutton").text("退出全屏");
                }
            }
            //退出全屏
            var cfScreen = function(){
                if (document.exitFullscreen) {
                    document.exitFullscreen();
                }
                else if (document.msExitFullscreen) {
                    document.msExitFullscreen();
                }
                else if (document.mozCancelFullScreen) {
                    document.mozCancelFullScreen();
                }
                else if (document.webkitCancelFullScreen) {
                    document.webkitCancelFullScreen();
                }else {
                    window.parent.showTopBottom();
                    isflsgrn = false;
                    $("#fsbutton").text("全屏");
                }
            }
            //全屏按钮点击事件
            $("#fsbutton").click(function(){
                var isfScreen = fullscreenEnable();
                if(!isfScreen && isflsgrn == false){
                    if (ieIsfSceen == true) {
                        document.msExitFullscreen();
                        ieIsfSceen = false;
                        return;
                    }
                    fScreen();
                }else{
                    cfScreen();
                }
            })
            //键盘操作
            $(document).keydown(function (event) {
                if(event.keyCode == 27 && ieIsfSceen == true){
                    ieIsfSceen = false;
                }
            });
            //监听状态变化
            if (window.addEventListener) {
                document.addEventListener('fullscreenchange', function(){ 
                    if($("#fsbutton").text() == "全屏"){
                        $("#fsbutton").text("退出全屏"); 
                    }else{
                        $("#fsbutton").text("全屏");
                    }
                });
                document.addEventListener('webkitfullscreenchange', function(){ 
                    if($("#fsbutton").text() == "全屏"){
                        $("#fsbutton").text("退出全屏"); 
                    }else{
                        $("#fsbutton").text("全屏");
                    }
                });
                document.addEventListener('mozfullscreenchange', function(){ 
                    if($("#fsbutton").text() == "全屏"){
                        $("#fsbutton").text("退出全屏"); 
                    }else{
                        $("#fsbutton").text("全屏");
                    }
                });
                document.addEventListener('MSFullscreenChange', function(){ 
                    if($("#fsbutton").text() == "全屏"){
                        $("#fsbutton").text("退出全屏"); 
                    }else{
                        $("#fsbutton").text("全屏");
                    }
                });
            }

值得注意的是 fullscreenEnabled 参数,网上的说法不一,有的说是监控浏览器是否进入了可以请求全屏模式的状态,有的说只是一个判断浏览器是否支持全屏的标志,实际使用时也确实出现了问题,IE11不能识别这个属性,需要自己单独设置一个标记来控制IE11当前是否为全屏状态。

以上就是全屏事件问题处理的详细内容,更多请关注其它相关文章!