如何检测浏览器是否支持 requestFullscreen

Question

如何检测浏览器是否支持requestFullscreen？

我在下面有这些代码来制作 chrome、safari、firefox 和opera（不完全工作）来制作全屏文档，但我想检测浏览器是否支持requestFullscreen。我该怎么办？

 $('.button-fullscreen').click(function(){ 

    var docElm = document.documentElement;

    // W3C Proposal
    if (docElm.requestFullscreen) {
        docElm.requestFullscreen();
    }

    // mozilla proposal
    else if (docElm.mozRequestFullScreen) {
        docElm.mozRequestFullScreen();          
    }

    // Webkit (works in Safari and Chrome Canary)
    else if (docElm.webkitRequestFullScreen) {
        docElm.webkitRequestFullScreen(); 
    }

    return false;
});

$('.button-sound').click(function(){               

    // W3C Proposal
    if (document.exitFullscreen) {
        document.exitFullscreen();
    }

    // mozilla proposal
    else if (document.mozCancelFullScreen) {
        document.mozCancelFullScreen();
    }

    // Webkit (works in Safari and Chrome Canary)
    else if (document.webkitCancelFullScreen) {
        document.webkitCancelFullScreen();
    }

    return false;
});

Answer 1

当您输入if (docElm.requestFullscreen) 时，您正在检测浏览器是否支持该方法，因为如果在docElm 对象上定义了requestFullscreen，它将返回true。

Answer 2

使用modernizr 框架避免测试n 个供应商前缀...

Modernizr.prefixed('requestFullscreen', document.documentElement)

Answer 3

从screenful中提取想法似乎可行

  const canFullscreen = (function() {
    for (const key of [
        'exitFullscreen',
        'webkitExitFullscreen',
        'webkitCancelFullScreen',
        'mozCancelFullScreen',
        'msExitFullscreen',
      ]) {
      if (key in document) {
        return true;
      }
    }
    return false;
  }());


  if (canFullscreen) {
    // supported
  } else {
    // not-supported
  }

注意：出于我的目的，我不需要库来进行全屏显示。我只需要代码来检测是否有可能，因为我正在使用其他一些可以全屏显示的库，但我需要知道是否显示全屏选项，然后调用该库。换句话说，如果可以全屏显示按钮，否则不要。