Question

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

Answer 1

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

Answer 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

webkit浏览器中的全屏API

2 个答案: