Jquery 如何检测浏览器支持全屏显示

如何检测浏览器是否支持

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;
});

---

当您将

if（docElm.requestFullscreen）

放入

if（docElm.requestFullscreen）

时，您正在检测浏览器是否支持该方法，因为如果

docElm

对象上定义了

requestFullscreen

，它将返回true。

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

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

---

从完整的屏幕中提取想法似乎是可行的

  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
  }

---

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

Modernizer目前依靠的是，如果你想减少中间人，上面提到的@gman为我做了一些调整。只需检查“exitFullscreen”，因为即使文档不受支持，也可以在文档中包含其他内容。我已经在Chrome、Firefox、Edge和Safari上进行了测试。通过上述调整，仅在Safari上canFullScreen设置为false——这是不受支持的。所有其他将其设置为true的浏览器也支持全屏显示。