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)时，您正在检测浏览器是否支持该方法，因为如果在requestFullscreen对象上定义了docElm，它将返回true。

Answer 2

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

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

Answer 3

从筛选中提取想法似乎可行

  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
  }

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

如何检测浏览器支持requestFullscreen

3 个答案: