2

如何检测浏览器是否支持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;
});
4

3 回答 3

3

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

于 2013-06-28T13:27:30.660 回答
2

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

Modernizr.prefixed('requestFullscreen', document.documentElement)
于 2013-06-28T13:32:50.097 回答
0

从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
  }

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

于 2020-08-23T14:16:00.067 回答