Home > Web Front-end > JS Tutorial > Full screen event problem handling

Full screen event problem handling

炎欲天舞
Release: 2017-08-04 15:55:01
Original
1468 people have browsed it

Code first


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("全屏");
                    }
                });
            }
Copy after login

It is worth noting that the fullscreenEnabled parameter has different opinions on the Internet. Some say it monitors whether the browser has been entered and can be requested. The status of full-screen mode, some say it is just a sign to determine whether the browser supports full-screen, but problems do occur in actual use. IE11 cannot recognize this attribute, and you need to set a separate mark to control whether IE11 is currently full-screen. state.

The above is the detailed content of Full screen event problem handling. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template