全螢幕事件問題處理

先上程式碼

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目前是否為全螢幕狀態。

以上是全螢幕事件問題處理的詳細內容。更多資訊請關注PHP中文網其他相關文章！