如何使用纯JavaScript检测全屏API支持?

时间:2019-01-25 16:49:39

标签: javascript cross-browser

这是我指的API:https://developer.mozilla.org/en-US/docs/Web/API/Fullscreen_API

至此,我已经尝试过了:

Modernizr拥有Modernizr.fullscreen的东西,但我不希望使用另一个库来完成看似简单的任务。

因此,毕竟Modernizr确实使用JS来弄清楚了,对了,我正在挖掘Modernizr的源代码以尝试看看它们是如何做到的,对吗?但是到目前为止,我在其源代码中发现的有关全屏API的全部就是这个文件(Modernizr / feature-detects / fullscreen-api.js)

/*!
{
  "name": "Fullscreen API",
  "property": "fullscreen",
  "caniuse": "fullscreen",
  "notes": [{
    "name": "MDN Docs",
    "href": "https://developer.mozilla.org/en/API/Fullscreen"
  }],
  "polyfills": ["screenfulljs"],
  "builderAliases": ["fullscreen_api"]
}
!*/
/* DOC
Detects support for the ability to make the current website take over the user's entire screen
*/
define(['Modernizr', 'prefixed'], function(Modernizr, prefixed) {
  // github.com/Modernizr/Modernizr/issues/739
  Modernizr.addTest('fullscreen', !!(prefixed('exitFullscreen', document, false) || prefixed('cancelFullScreen', document, false)));
});

...而且我不太了解该代码。

1 个答案:

答案 0 :(得分:0)

以下代码段似乎是最佳解决方案:

const fullScreenAvailable = document.fullscreenEnabled || 
                            document.mozFullscreenEnabled ||
                            document.webkitFullscreenEnabled ||
                            document.msFullscreenEnabled