Question

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

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

//对不起，我真的不懂js。所以，如果你做一个例子，请使用＆＃39; canvas＆＃39;作为有问题的元素。

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可能设置为if (typeof(document.isFullscreen === undefined)) { document.isFullscreen = function() { return document.webkitIsFullscreen || //Webkit browsers document.mozFullScreen || // Firefox document.msFullscreenElement !== undefined; // IE }; }。

以下是您可以使用的有效填充物：

if( document.isFullscreen() ){ fullscreenOn }else{ fullscreenOff }

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

注意：称之为：{{1}}

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

  }

}

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

5 个答案: