如何使用HTML5的全屏API检查元素是否在全屏中

How can I check if an element is in fullscreen with the fullscreen API for HTML5

本文关键字：元素 是否 检查 API 何使用 HTML5      更新时间：2024-01-20

这个问题几乎就在标题中。我想返回一个值，告诉我有问题的元素是否在全屏中。如何使用javascript实现这一点？这似乎不起作用：

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

//对不起，我真的不懂js。因此，如果你在做一个例子，请使用"画布"作为有问题的元素。

我在玩了一点之后发现了如何做到这一点：

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

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

这里有一个单行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

注意-要检查您是否处于全屏状态，您总是需要检查文档元素的全屏属性（如我在示例中所示）-是而不是元素的一个全屏属性。

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

我刚刚合并了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
  }
}
相关文章：