如何使用HTML5的全屏API检查元素是否全屏显示

Question

问题几乎在标题中。 我想返回一个值，告诉我有问题的元素是否全屏显示。 我怎么用javascript做到这一点？ 这似乎不起作用：

function fs_status()
{
var fullscreenElement = canvas.fullscreenElement ||canvas.mozFullscreenElement || canvas.webkitFullscreenElement;
return fullscreenElement;
}

//对不起，我真的不懂js。 因此，如果你做一个例子，请使用'canvas'作为问题。

Answer 1

我玩了一下之后发现了怎么做：

function fs_status() {
    if (document.fullscreenElement || document.webkitFullscreenElement ||
        document.mozFullScreenElement)
            return 1;
    else
            return -1;
}

Answer 2

遗憾的是，当您尝试在不同的浏览器上工作时，Fullscreen API仍然是一团糟。
Webkit浏览器和Firefox确实包含文档的isFullscreen属性，但不包括IE。 但是，您可以使用查找msFullscreenElement的变通方法，如果未请求全屏，则可能将其设置为undefined 。

这里有一种你可以使用的polyfill：

if (typeof(document.isFullscreen === undefined)) {
  document.isFullscreen = function() {
    return document.webkitIsFullscreen || //Webkit browsers
           document.mozFullScreen || // Firefox
           document.msFullscreenElement !== undefined; // IE
  };
}

没有在IE上测试它，但它应该工作。

注意：这样称呼： if( document.isFullscreen() ){ fullscreenOn }else{ fullscreenOff }

Answer 3

这是一个可以跨浏览器工作的单行if子句：

if (!document.isFullScreen && !document.fullscreenElement && !document.webkitFullscreenElement && !document.mozFullScreenElement && !document.msFullscreenElement) {
     .... do something
}

这会检查您是否目前处于Chrome，Opera，Firefox，IE11和Edge的全屏模式。 所有HTML5全屏幕内容当前都不是标准的跨浏览器，因此我们需要检查if子句中是否存在各种不同的前缀。 这是用于显示不同浏览器需要使用哪些不同前缀的文档：

https://developer.mozilla.org/en-US/docs/Web/API/Fullscreen_API#Prefixing

注意 - 要检查您是否全屏，您始终需要检查文档元素的全屏属性（如我在示例中所示） - 它不是全屏元素的属性。

Answer 4

Kaaido的答案在Chrome中对我不起作用，但我喜欢这种方法。 更新的代码出现在：

 if (typeof(document.isFullscreen === undefined)) { document.isFullscreen = function() { return !((document.fullScreenElement !== undefined && document.fullScreenElement === null) || (document.msFullscreenElement !== undefined && document.msFullscreenElement === null) || (document.mozFullScreen !== undefined && !document.mozFullScreen) || (document.webkitIsFullScreen !== undefined && !document.webkitIsFullScreen)); } } 

Answer 5

我刚刚合并了Samuel Mungy的答案和Kaiido的答案，并添加了一些可读性。

 if (document.isFullscreen === undefined) {

    var fs = function () {
      if(document.fullscreenElement !== undefined) return document.fullscreenElement;
      if(document.webkitFullscreenElement !== undefined) return document.webkitFullscreenElement;
      if(document.mozFullScreenElement !== undefined) return document.mozFullScreenElement;
      if(document.msFullscreenElement !== undefined) return document.msFullscreenElement;
    }
    if (fs() === undefined) document.isFullscreen = undefined;
    else document.isFullscreen = fs;
  }

问题具体部分：我认为

canvas = document.getElementById("myCanvas");

所以你可以使用这个片段

if(document.isFullscreen !== undefined && document.isFullscreen().getAttribute("id") !== null){

  if(document.isFullscreen().getAttribute("id") === "myCanvas"){
    //your canvas is fullscrren now

  }else{
    //your canvas is not fullscreen now

  }

}