7

特定の Web サイトで HTML5 フルスクリーンを切り替える (オン/オフ) ボタンを作成しようとしています。

多くのドキュメントを読んだ後でも、ブラウザーが特定のプロパティを処理する方法にはまだいくつかの矛盾があるようです。

私は、Firefox と Safari/MacOS で機能し、Safari/Windows で部分的に機能し、Chrome と Opera では完全に機能しない、一種の「クロスブラウザー」アプローチを採用しました。

いくつかの去勢されたコード スニペット:

// class init
initialize: function() {

    this.elmButtonFullscreen = $('fullscreen');
    this.elmButtonFullscreen.on('click', this.onClickFullscreen.bindAsEventListener(this));
},

// helper methods
_launchFullScreen: function(element) {

    if(element.requestFullScreen) { element.requestFullScreen(); }
    else if(element.mozRequestFullScreen) { element.mozRequestFullScreen(); }
    else if(element.webkitRequestFullScreen) { element.webkitRequestFullScreen(); }
},
_cancelFullScreen: function() {

    if(document.cancelFullScreen) { document.cancelFullScreen(); }
    else if(document.mozCancelFullScreen) { document.mozCancelFullScreen(); }
    else if(document.webkitCancelFullScreen) { document.webkitCancelFullScreen(); }
},
_isFullScreen: function() {

    fullScreen = document.fullscreenEnabled || document.mozFullscreenEnabled || document.webkitFullscreenEnabled ? true : false;
    if(this.debug) console.log('Fullscreen enabled? ' + fullScreen);
    return fullScreen;
},

// callbacks
onClickFullscreen: function(e) {

    e.stop();
    if(this._isFullScreen()) this._cancelFullScreen();
    else this._launchFullScreen(document.documentElement);
}
4

3 に答える 3

5 
function goFullScreen() {
  const el = document.documentElement,
      rfs = el.requestFullScreen
        || el.webkitRequestFullScreen
        || el.mozRequestFullScreen
        || el.msRequestFullscreen

  rfs.call(el)
}

document.querySelector('#full-screen-button')
  .addEventListener('click', () => {
    goFullScreen()
  })

リクエストは、クリック イベントなどのfullScreenユーザー トリガー イベントを介して行う必要があることに注意してください。mousedownmouseup

于 2014-02-23T22:56:57.563 に答える
4

_isFullScreen関数の1行目を次のように変更します

fullScreen = document.fullscreenEnabled || document.mozFullscreenEnabled || document.webkitFullscreenEnabled ? true : false;

トリックを行います（少なくとも、MacおよびWindows上のFirefox、Chrome、およびSafariの場合）

于 2013-05-04T07:55:12.310 に答える
1

Mozilla の Developer Network で見つけた情報によると、Webkit の関数の綴りは実際には少し異なります。

document.webkitRequestFullscreen画面の小文字の「s」を使用します。

また、W3 仕様から、小文字の「s」を使用することを意味します。

MDN リンクで、彼らは次のように述べています。

注: この仕様では、「requestFullscreen」または「fullscreenEnabled」のように「Fullscreen」というラベルを使用します (大文字の「s」は使用しません)。ここで説明する実装およびその他のプレフィックス付きの実装では、大文字の「S」を使用する場合があります。

于 2013-05-04T07:28:08.647 に答える