切换全屏退出 [英] Toggle Fullscreen exit

问题描述

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

I have the following javascript that is triggered by a button in my HTML:

function toggleFullScreen(){

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

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

How can I extend this JS code to incorporate the ability to exit fullscreen? What are the best practices for this?

推荐答案

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

There is actually a fully functional example on MDN: https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Using_full_screen_mode#Toggling_fullscreen_mode

引用:

切换全屏模式

当用户按下 Enter 键时会调用此代码，如上所示.

This code is called when the user hits the Enter key, as seen above.

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 为前缀).如果为空，则文档当前处于窗口模式，因此我们需要切换到全屏模式.切换到全屏模式是通过调用 element.mozRequestFullScreen() msRequestFullscreen() 或webkitRequestFullscreen()，取决于哪个可用.

This starts by looking at the value of the fullscreenElement attribute on the document (checking it prefixed with both moz, ms, and webkit). If it's null, the document is currently in windowed mode, so we need to switch to fullscreen mode. Switching to fullscreen mode is done by calling either element.mozRequestFullScreen() msRequestFullscreen()or webkitRequestFullscreen(), depending on which is available.

如果全屏模式已经激活(fullscreenElement 非空)，我们调用 document.mozCancelFullScreen()、msExitFullscreen 或webkitExitFullscreen()，同样取决于使用的浏览器.

If fullscreen mode is already active (fullscreenElement is non-null), we call document.mozCancelFullScreen(), msExitFullscreen or webkitExitFullscreen(), again depending on which browser is in use.

这篇关于切换全屏退出的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！