1

我正在为 JavaScript Fullscreen API 进行切换。不知何故，Webkit 浏览器中的退出全屏模式（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");
    }
  }
};
4

2 回答 2

2

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

于 2013-08-13T14:23:31.073 回答
1

这是一篇不错的文章，描述了如何做到这一点。它是从 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
于 2021-07-12T22:53:24.517 回答