切换全屏退出

Question

切换全屏退出

7

我有以下JavaScript代码，由HTML中的按钮触发：

function toggleFullScreen(){

    if(v.requestFullScreen){
        v.requestFullScreen();
    }
    else if(v.webkitRequestFullScreen){
        v.webkitRequestFullScreen();
    }
    else if(v.mozRequestFullScreen){
        v.mozRequestFullScreen();
    }
}

我该如何扩展这段JS代码以实现退出全屏的功能？在此有哪些最佳实践？

- cwiggo

使用 screenfull.js ，并查看演示。 - Code4R7

3个回答

3

你尝试过这些东西吗？

exitFullscreen();
mozCancelFullScreen();
webkitExitFullscreen();
msExitFullscreen();

请看这里：

https://developer.mozilla.org/zh-CN/docs/Web/Guide/API/DOM/Using_full_screen_mode

或者：

http://blog.pearce.org.nz/2011/11/firefoxs-html-full-screen-api-enabled.html

对您是否有足够的帮助？

- Makromat

我该如何将这些函数适应到我的代码中？我已经尝试了一个小时 :) - cwiggo

感谢您的迅速回复，我已经找到所需的函数！ - cwiggo

没问题 :) 你能给我的答案打个赞吗？非常感谢。 - Makromat

@Chris，这段代码是我发给你的网站上的。这就是盗窃行为 :D - Makromat

1

从http://jquery.com/download/获取jQuery
从https://github.com/sindresorhus/screenfull.js/获取screenfull.min.js
将它们包含在 <head>...</head> 中
给 <body> 分配一个ID，例如mainBody

将函数放置在闭合的body标记前即</body>

<script src="js/jquery.js"></script> 
<script src="js/screenfull.min.js"></script> 
</head>

<body id="mainBody">
<!--[whatever]-->
<script>
             $(function tScreen()
             {
              if(!screenfull.enabled) 
              { return false; }
              screenfull.request(document.getElementById('mainBody'));
             });

             $('#toggle').click(function () 
             { screenfull.toggle($('#mainBody')[0]);});
       </script>
</body>
</html>

- 010

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- gpgekko · Accepted Answer

实际上，在MDN上有一个完全可用的示例： https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Using_full_screen_mode#Toggling_fullscreen_mode

引用:

切换全屏模式

如上所示，当用户按下回车键时调用此代码。

function toggleFullScreen() {
  if (!document.fullscreenElement &&    // alternative standard method
      !document.mozFullScreenElement && !document.webkitFullscreenElement && !document.msFullscreenElement ) {  // current working methods
    if (document.documentElement.requestFullscreen) {
      document.documentElement.requestFullscreen();
    } else if (document.documentElement.msRequestFullscreen) {
      document.documentElement.msRequestFullscreen();
    } else if (document.documentElement.mozRequestFullScreen) {
      document.documentElement.mozRequestFullScreen();
    } else if (document.documentElement.webkitRequestFullscreen) {
      document.documentElement.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
    }
  } else {
    if (document.exitFullscreen) {
      document.exitFullscreen();
    } else if (document.msExitFullscreen) {
      document.msExitFullscreen();
    } else if (document.mozCancelFullScreen) {
      document.mozCancelFullScreen();
    } else if (document.webkitExitFullscreen) {
      document.webkitExitFullscreen();
    }
  }
}

首先我们会查看文档上的fullscreenElement属性（检查这个属性是否带有moz、ms和webkit的前缀）。如果它的值为null，那么文档当前处于窗口模式，所以我们需要切换到全屏模式。要切换到全屏模式，可以调用element.mozRequestFullScreen()、msRequestFullscreen()或webkitRequestFullscreen()中的任意一个（取决于浏览器支持哪个方法）。

如果全屏模式已经启用（fullscreenElement不为null），那么我们会调用document.mozCancelFullScreen()、msExitFullscreen()或webkitExitFullscreen()，同样取决于当前使用的浏览器。