全画面イベントの問題処理

炎欲天舞
リリース: 2017-08-04 15:55:01
オリジナル
1467 人が閲覧しました

コードから始めましょう


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 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート