web-dev-qa-db-ja.com

ページがフルスクリーンで終了するタイミングを検出する方法は？

Three.jsを使用して3Dマルチプレイヤーゲームを作成します。プレイヤーはさまざまな既存のゲームに参加できます。 「再生」をクリックすると、レンダラーがページとフルスクリーンに追加されます。これはうまく機能しますが、問題は、フルスクリーンを終了しても、まだ追加されたままになることです。削除したいのですが、いつかわかりません！

したがって、基本的に、「この要素は全画面表示を終了しました」というイベントを探しています。

これは、ページにレンダラーを追加する方法です。

container = document.getElementById('container');
document.body.appendChild(container);

var renderer = new THREE.WebGLRenderer({antialias: true});
renderer.setSize( WIDTH, HEIGHT);
container.appendChild( renderer.domElement );

私がそれをフルスクリーンする方法なら：

THREEx.FullScreen.request(container); 
renderer.setSize(screen.width, screen.height);

また、誰かがマウスをページの上部に向けるたびに、その迷惑なヘッダーが表示されないようにする方法はありますか？そして、Firefoxでのエスケープ（フルスクリーンを終了する）をエスケープすることを防ぐことができると思います。Chrome with preventDefault？

編集：

「fullscreenchange」イベントは実際に発生しますが、ブラウザごとに名前が異なります。たとえば、Chromeでは「webkitfullscreenchange」と呼ばれ、Firefoxでは「mozfullscreenchange」です。

javascripthtmlbrowserfullscreenwebgl
54
corazza

フルスクリーン仕様では、"fullscreenchange"（適切な接頭辞付き）イベントは、ページのフルスクリーン状態が変更されるたびに、ドキュメントで発生します。これには、フルスクリーンの開始と終了が含まれます。そのイベント内では、document.fullScreenElementページがフルスクリーンかどうかを確認します。フルスクリーンの場合、プロパティはnull以外になります。

MDNをチェックアウト 詳細については。

他の質問については：いいえ、Escが全画面表示を終了するのを防ぐ方法はありません。これは、ユーザーがブラウザーの動作を常に制御できるようにするために行われた妥協案です。ブラウザはneverを使用して、ユーザーが全画面表示を終了できないようにします。期間。

FirefoxがChromeよりもレンダリングが遅いという点については、ほとんどの実用的な目的ではそうではないことを保証できます。 2つのブラウザのパフォーマンスに大きな違いがある場合、おそらくJavaScriptコードがGPUではなくボトルネックであることを意味します。

42
Toji

以下がその方法です。

if (document.addEventListener)
{
 document.addEventListener('fullscreenchange', exitHandler, false);
 document.addEventListener('mozfullscreenchange', exitHandler, false);
 document.addEventListener('MSFullscreenChange', exitHandler, false);
 document.addEventListener('webkitfullscreenchange', exitHandler, false);
}

function exitHandler()
{
 if (document.webkitIsFullScreen || document.mozFullScreen || document.msFullscreenElement !== null)
 {
  // Run code on exit
 }
}

Opera、Safari、Chrome with webkit、Firefox/Gecko with moz、IE 11 with MSFullScreenChangeであり、すべてのブラウザで正常に実装されたら、fullscreenchangeで実際の仕様をサポートします。明らかに、フルスクリーンAPIは最新のブラウザでのみサポートされているため、attachEvent IEの古いバージョンのフォールバック。

76
Alex W

私は John Dyerのコード をToniと統合し、Yannbaneのコメントを使用して中央ハンドラーを作成し、複数のリスナーを追加して呼び出します：

   var changeHandler = function(){                                           
      //NB the following line requrires the libary from John Dyer                         
      var fs = window.fullScreenApi.isFullScreen();
      console.log("f" + (fs ? 'yes' : 'no' ));                               
      if (fs) {                                                              
        alert("In fullscreen, I should do something here");                  
      }                                                                      
      else {                                                                 
        alert("NOT In fullscreen, I should do something here");              
      }                                                                      
   }                                                                         
   document.addEventListener("fullscreenchange", changeHandler, false);      
   document.addEventListener("webkitfullscreenchange", changeHandler, false);
   document.addEventListener("mozfullscreenchange", changeHandler, false);

これはMoz 12でのみテストされています。

気軽に拡大してください

11
ErichBSchulz

ブラウザーのAPIが変更されました。たとえば、Chromeにはdocument.webkitIsFullScreenはありません。これは私のために働いたものです：

document.addEventListener("fullscreenchange", onFullScreenChange, false);
document.addEventListener("webkitfullscreenchange", onFullScreenChange, false);
document.addEventListener("mozfullscreenchange", onFullScreenChange, false);

onFullScreenChange() {
  var fullscreenElement = document.fullscreenElement || document.mozFullScreenElement || document.webkitFullscreenElement;

  // if in fullscreen mode fullscreenElement won't be null
}
11
wawka

Alex Wのコードを少し変更して、イベントをフルスクリーンで起動するようにしましたexitsのみ。 Firefox 53.0、Chrome 48.0、およびChromium 53.0でテスト済み：

if (document.addEventListener)
{
 document.addEventListener('fullscreenchange', exitHandler, false);
 document.addEventListener('mozfullscreenchange', exitHandler, false);
 document.addEventListener('MSFullscreenChange', exitHandler, false);
 document.addEventListener('webkitfullscreenchange', exitHandler, false);
}

function exitHandler()
{
 if (document.webkitIsFullScreen === false)
 {
  ///fire your event
 }
 else if (document.mozFullScreen === false)
 {
  ///fire your event
 }
 else if (document.msFullscreenElement === false)
 {
  ///fire your event
 }
}
6
Victor Dubrovsky

Mozillaの MDNページ は、フルスクリーンAPIへのベンダーに依存しないアプローチとしてfscreenを使用することを示唆しました。残念ながら、現時点（2018-02-06）でも、これらのAPIは完全に標準化されていません。 Firefoxには、接頭辞なしのAPIがデフォルトで有効になっていません。

とにかく、fscreenへのURLは次のとおりです。 https://github.com/rafrex/fscreen （Node.jsで使用するnpmパッケージとして利用可能です）ベースのビルドパイプライン。）

今のところ、これは接頭辞のないAPIが上陸し、すべての主要なブラウザですぐに利用できるようになるまで、私にとって優れたアプローチのようです。

2
Per Lundberg

サファリを除くすべてのブラウザが私のために働いた

これは私が問題を修正するために使用したものです。

if (navigator.userAgent.indexOf('Safari') != -1 && navigator.userAgent.indexOf('Chrome') == -1)  { 

  document.addEventListener('webkitfullscreenchange', exitHandler);

  function exitHandler() {
    if (!document.fullscreenElement && !document.webkitIsFullScreen && !document.mozFullScreen && !document.msFullscreenElement) {
           /*CODE HERE*/      
        }
      }
    }

コードペンをご覧ください。 クリスフェルディナンディの 投稿については非常に感謝しています

0
Digggid