如何使用HTML5的全屏API检查元素是否处于全屏状态

Question

问题已经在标题中说得很清楚了。我想返回一个值，告诉我所询问的元素是否处于全屏状态。我该如何使用javascript实现呢？这似乎行不通：

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

//抱歉，我不太了解JavaScript。如果您要创建一个示例，请使用“canvas”作为相关元素。

- Samuel Mungy

---

https://github.com/rafrex/fscreen 是一个围绕浏览器厂商前缀的不错的小型库，压缩后约为0.9 KB。 - dotnetCarpenter

Answer 1

玩了一会儿后，我发现了如何做到这一点：

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

- Samuel Mungy

---

我认为你缺少了msIE，而且你可能想要返回0而不是-1：第一个等同于false，可以用作布尔值；最后一个被解读为true，所以你的函数将始终返回true。 - Kaiido

Answer 2

这是一个适用于跨浏览器的一行if语句： ```

这是一个适用于跨浏览器的一行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

注意 - 要检查你是否处于全屏状态，你总是需要检查文档元素的全屏属性（如示例所示），而不是元素本身的属性。请保留HTML标签。

- Chris Halcrow

Answer 3

遗憾的是，当您尝试在不同的浏览器上工作时，全屏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 }

- Kaiido

---

谢谢帮我解决问题，让我自己找到了答案。 - Vash

Answer 4

我刚刚合并了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

  }

}

- mustafa kemal tuna

Answer 5

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));
  }
}

- Daniel Petrikin