Question

我有以下由我的HTML中的按钮触发的javascript：

function toggleFullScreen(){

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

如何扩展此JS代码以包含退出全屏的功能？这方面的最佳做法是什么？

Answer 1

MDN实际上有一个功能齐全的例子： https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Using_full_screen_mode#Toggling_fullscreen_mode

引用：

切换全屏模式

当用户点击Enter键时，将调用此代码，如上所示。
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（），同样取决于正在使用的浏览器。

Answer 2

你有尝试过这个吗？

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

看那里：

https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Using_full_screen_mode

或：

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

这对你有用吗？

Answer 3

从http://jquery.com/download/
从以下网址获取screenfull.min.js： https://github.com/sindresorhus/screenfull.js/
将其包含在<head>...</head>
将ID分配给<body> ex。型主体

将函数放在结束体标记之前，即。 </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>

切换全屏退出

3 个答案: