3

フルスクリーン Web APIを使用しています。 

  function goFullscreen(){

     var elem =  document.body;
     if (elem.requestFullscreen)  elem.requestFullscreen();
     else if (elem.mozRequestFullScreen) elem.mozRequestFullScreen();
     else if (elem.webkitRequestFullscreen) elem.webkitRequestFullscreen(); 

     var fullscreenElement = document.mozFullScreenElement;   
     if(fullscreenElement){
     /** some changes to the page **/
     }     
   }

を使用しdocument.mozFullScreenElementて、ページがフルスクリーンかどうかを確認しました。

ただし、そのチェックは、ページが全画面表示になったとき(つまり、ユーザーが [許可] をクリックしたとき) ではなく、ページが既に全画面表示になっている場合にのみ機能します。それで、これのためのハックはありますか？

4

3 に答える 3

0

このhttp://xme.im/display-fullscreen-website-using-javascriptで、さまざまなブラウザーでのサポートの概要を説明している非常に優れた投稿を見つけました。また、使用できるいくつかのイベントを提案します。

それがうまくいかない場合、（厄介な）ハックがフルスクリーンをチェックするsetIntervalポーリングを導入し、trueの場合はカスタムイベントを発生させて間隔をクリアすると思いますか？

編集...

この記事で上記のコードを試してみましたが、問題が解決しないことに同意します。また、フル スクリーン モードであるかどうかのサイズ ベースの検出は、場合によっては予期しない動作をします。

全体的にブラウザーの動作では、全画面表示になった瞬間に「全画面表示」と見なされるようです (Chrome の場合、これはユーザーが [許可] をクリックする前です)。次のコードを使用すると、遅延や間隔を必要とせずにこれを検出できましたが、ユーザーはいつでも (拒否またはブラウザー コントロールを介して) フル スクリーン モードを終了できるため、入力時に行ったページの変更を破棄する必要があります。全画面表示。イベントがないので、Deny を通常の exit と同じように扱う必要があると思います。以下のコードは Webkit のみですが、代替プレフィックス/疑似クラスを使用して簡単に変更できます。

<html>
<head>
    <style>
        html, body { height : 100%; width : 100%; }
    </style>        
    <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
    <script>
        document.addEventListener("webkitfullscreenchange", function () {
            var isFullScreen = $("body:-webkit-full-screen").length;
            document.getElementById("status").innerHTML = (isFullScreen)? "I am full screen" : "I am NOT full screen";          
        }, false);

    </script>
</head>
<body>
    Hello
    <div id="status"></div>
    <button onclick="document.body.webkitRequestFullScreen()">&nbsp;Request FullScreen&nbsp;</button>       
</body>

于 2013-09-25T09:03:13.603 に答える