Webkit 浏览器中的全屏 API答案

【问题标题】：Fullscreen API in webkit browserWebkit 浏览器中的全屏 API
【发布时间】：2021-07-13 07:10:11
【问题描述】：

我正在为 JavaScript Fullscreen API 进行切换。不知何故，Webkit 浏览器中的 exit fullscreen mode（else 语句）不起作用。有人可以暗示什么是错的吗？该代码是全屏 API 的 Mozilla 文档的示例代码。 var toggleFullScreen;

toggleFullScreen = function() {
  if ((document.fullScreenElement && document.fullScreenElement !== null) || (!document.mozFullScreenElement && !document.webkitFullScreenElement)) {
    if (document.documentElement.requestFullScreen) {
      return document.documentElement.requestFullScreen();
    } else if (document.documentElement.mozRequestFullScreen) {
      return document.documentElement.mozRequestFullScreen();
    } else if (document.documentElement.webkitRequestFullScreen) {
      return document.documentElement.webkitRequestFullScreen();
    } else {
      return console.log("didnt happen");
    }
  } else {
    if (document.cancelFullScreen) {
      console.log("Mozilla Proposal cancels Fullscreen");
      return document.cancelFullScreen();
    } else if (document.mozCancelFullScreen) {
      console.log("Firefox closes");
      return document.mozCancelFullScreen();

// This is the line:

    } else if (document.webkitCancelFullScreen) {
      console.log("Webkit closes");
      return document.webkitCancelFullScreen();
    } else {
      return console.log("Can't close");
    }
  }
};

【问题讨论】：

对于“webkit 浏览器”，您是指 chrome 还是 buggy safari？
有几个jQuery plugins 有助于简化全屏，可能值得一试。
Safari 和 chrome。我不找插件，因为原生代码很容易实现。

标签： javascript jquery toggle fullscreen

【解决方案1】：

看看这里http://xme.im/display-fullscreen-website-using-javascript ...这是我在引用面向全屏的代码时使用的页面...它应该会有所帮助。

【讨论】：

该链接不再起作用。 DNS 探测找不到它。它可能被移动了吗？

【解决方案2】：

这是一篇不错的文章，描述了如何做到这一点。它是从 2012 年开始的，但它似乎有效。

https://hacks.mozilla.org/2012/01/using-the-fullscreen-api-in-web-browsers/

文章要点：

function enterFullscreen(element) {
    if (element.requestFullscreen) {
        element.requestFullscreen({ navigationUI: "hide" });
    }
    else if (element.mozRequestFullScreen) {
        element.mozRequestFullScreen({ navigationUI: "hide" });
    }
    else if (element.webkitRequestFullScreen) {
        element.webkitRequestFullScreen();
    }
    else if (docElm.msRequestFullscreen) {
        docElm.msRequestFullscreen();
    }
}

function exitFullscreen(){
    if (document.exitFullscreen) {
        document.exitFullscreen();
    }
    else if (document.mozCancelFullScreen) {
        document.mozCancelFullScreen();
    }
    else if (document.webkitCancelFullScreen) {
        document.webkitCancelFullScreen();
    }
    else if (document.msExitFullscreen) {
        document.msExitFullscreen();
    }
}

function setOnFullscreenChange(callback){
    document.addEventListener("fullscreenchange", function () {
        callback();
    }, false);
    
    document.addEventListener("mozfullscreenchange", function () {
        callback();
    }, false);
    
    document.addEventListener("webkitfullscreenchange", function () {
        callback();
    }, false);
    
    document.addEventListener("msfullscreenchange", function () {
        callback();
    }, false);
}

请注意，现代版本的 Firefox 不需要 moz 前缀。

也（不是来自文章）检查是否启用了全屏

function getIsFullscreenEnabled(){
    return document.fullscreenEnabled 
    || document.webkitFullscreenEnabled;
} // checks if the browser supports fullscreen

function getIsBrowserInFullscreen(){
    return document.fullscreenElement != null 
    || document.webkitFullscreenElement != null;
} //checks if browser is currently in fullscreen mode. Note that document.fullscreen is deprecated

【讨论】：