Javascript 如何使用Javascript退出全屏onclick？

How to exit fullscreen onclick using Javascript?

提问by Kraang Prime

Not sure if the following code snip will work embedded on SO, as it didn't work when pasting it, however it does work stand-alone.

不确定以下代码片段是否可以嵌入到 SO 中，因为它在粘贴时不起作用，但它确实可以独立运行。

The problem, is I want this to be a toggle; not just to enter fullscreen mode, but to exit it if the user is in fullscreen. It goes into fullscreen mode perfectly, and executes the exit fullscreen code (as the alert()box is shown which runs after the exit code but inside the exit code condition only) yet it does nothing.

问题是我希望这是一个切换；不仅仅是进入全屏模式，而是在用户全屏时退出它。它完美地进入全屏模式，并执行退出全屏代码（如alert()所示的框在退出代码之后运行但仅在退出代码条件内运行）但它什么也不做。

I have read up on this here, and herewhich seems that I am doing everything correct, but something is missing. Could you please assist in figuring out how to make this procedural code work.

我已经阅读了这个here，here似乎我做的一切都是正确的，但是缺少一些东西。您能否帮助弄清楚如何使这个程序代码工作。

function fullscreen() {
 var isInFullScreen = (document.fullscreenElement && document.fullscreenElement !== null) ||
  (document.webkitFullscreenElement && document.webkitFullscreenElement !== null) ||
  (document.mozFullScreenElement && document.mozFullScreenElement !== null) ||
  (document.msFullscreenElement && document.msFullscreenElement !== null);

 var docElm = document.documentElement;
 if (!isInFullScreen) {
  if (docElm.requestFullscreen) {
   docElm.requestFullscreen();
  } else if (docElm.mozRequestFullScreen) {
   docElm.mozRequestFullScreen();
  } else if (docElm.webkitRequestFullScreen) {
   docElm.webkitRequestFullScreen();
  } else if (docElm.msRequestFullscreen) {
   docElm.msRequestFullscreen();
  }
 } else {
  if (docElm.exitFullscreen) {
   docElm.exitFullscreen();
  } else if (docElm.webkitExitFullscreen) {
   docElm.webkitExitFullscreen();
  } else if (docElm.mozCancelFullScreen) {
   docElm.mozCancelFullScreen();
  } else if (docElm.msExitFullscreen) {
   docElm.msExitFullscreen();
  }
  alert('exit fullscreen, doesnt work');
 }
}

<a onclick="fullscreen()" href="javascript:void(0);">Toggle FullScreen</a>

I also tried adding parent.exitfs()where the alert code is, according to this questions accepted answerand still has no impact

我还尝试添加parent.exitfs()警报代码的位置，根据这个问题接受了答案，但仍然没有影响

回答by Kraang Prime

Figured it out.

弄清楚了。

Apparently, to enter full screen, you need to use the Element, however to exit fullscreen, you use document.

显然，要进入全屏，您需要使用 Element，但是要退出全屏，您需要使用document.

Here is the complete javascript function to toggle fullscreen that works !!!

这是完整的 javascript 功能来切换全屏工作！！！

function fullscreen() {
    var isInFullScreen = (document.fullscreenElement && document.fullscreenElement !== null) ||
        (document.webkitFullscreenElement && document.webkitFullscreenElement !== null) ||
        (document.mozFullScreenElement && document.mozFullScreenElement !== null) ||
        (document.msFullscreenElement && document.msFullscreenElement !== null);

    var docElm = document.documentElement;
    if (!isInFullScreen) {
        if (docElm.requestFullscreen) {
            docElm.requestFullscreen();
        } else if (docElm.mozRequestFullScreen) {
            docElm.mozRequestFullScreen();
        } else if (docElm.webkitRequestFullScreen) {
            docElm.webkitRequestFullScreen();
        } else if (docElm.msRequestFullscreen) {
            docElm.msRequestFullscreen();
        }
    } else {
        if (document.exitFullscreen) {
            document.exitFullscreen();
        } else if (document.webkitExitFullscreen) {
            document.webkitExitFullscreen();
        } else if (document.mozCancelFullScreen) {
            document.mozCancelFullScreen();
        } else if (document.msExitFullscreen) {
            document.msExitFullscreen();
        }
    }
}

And a simple case on how to use it :

以及一个关于如何使用它的简单案例：

<button onclick="fullscreen()">Toggle FullScreen</button>

You need to make sure that this is a short method called when the user does an action on the page. From what the documentation says, is this is a feature that requires a higher access mode, and thus you can not (at this time) automatically force fullscreen on things like when the page has loaded, or async events (unless they are events from a users action like Click), etc.

您需要确保这是一个在用户在页面上执行操作时调用的简短方法。根据文档的说法，这是一项需要更高访问模式的功能，因此您不能（此时）自动强制全屏显示页面加载或异步事件（除非它们是来自用户操作，如点击）等。

回答by Carl Smith

A more generalized helper (derived from the accepted answer)...

一个更通用的助手（来自接受的答案）......

Get Mode

获取模式

The function can be invoked without arguments to find out if the browser is currently in Fullscreen Mode. It returns trueif so and falseotherwise.

可以不带参数调用该函数，以确定浏览器当前是否处于全屏模式。true如果是这样，false否则它会返回。

Set Mode

设置模式

The function can be invoked with a bool to explicitly set the current mode, where trueensures the browser is in Fullscreen Mode, and falseensures it isn't.

可以使用 bool 调用该函数以显式设置当前模式，其中true确保浏览器处于全屏模式，并false确保它不是。

Toggle Mode

切换模式

The function can be invoked with nullas the only argument to implicitly set the mode to the opposite of whatever mode it is currently in.

该函数可以null作为唯一参数被调用，以将模式隐式设置为与当前处于的任何模式相反的模式。

---

---

let fullscreen = function() {

    let enter = function() {
        let body = document.body;
        if (body.requestFullscreen) body.requestFullscreen();
        else if (body.webkitRequestFullscreen) body.webkitRequestFullscreen();
        else if (body.mozRequestFullScreen) body.mozRequestFullScreen();
        else if (body.msRequestFullscreen) body.msRequestFullscreen();
    };

    let exit = function() {
        if (document.exitFullscreen) document.exitFullscreen();
        else if (document.webkitExitFullscreen) document.webkitExitFullscreen();
        else if (document.mozCancelFullScreen) document.mozCancelFullScreen();
        else if (document.msExitFullscreen) document.msExitFullscreen();
    };

    let attemptToGetState = element => element && element !== null;

    return function(action=undefined) {
        if (action === true) enter();
        else if (action === false) exit();
        else {
            let currentlyFullscreen = (
                attemptToGetState(document.fullscreenElement)       ||
                attemptToGetState(document.webkitFullscreenElement) ||
                attemptToGetState(document.mozFullScreenElement)    ||
                attemptToGetState(document.msFullscreenElement)
            );
            if (action === undefined) return !! currentlyFullscreen;
            else currentlyFullscreen ? exit() : enter();
        }
    };

}();

回答by Kalimah

Solutions provided here are incredibly long. You can use these few lines to show or cancel fullscreen.

这里提供的解决方案非常长。您可以使用这几行来显示或取消全屏。

Show full screen:

显示全屏：

  /* You can use any HTML element through JS selector functions
   * eg. document.querySelector(".example");
  */
const element = document; 
const requestFullScreen = element.requestFullscreen || element.webkitRequestFullScreen || element.mozRequestFullScreen || element.msRequestFullScreen;
requestFullScreen.call(element);

Cancel full screen:

取消全屏：

// As correctly mentioned in the accepted answer, exitFullscreen only works on document
const cancellFullScreen = document.exitFullscreen || document.mozCancelFullScreen || document.webkitExitFullscreen || document.msExitFullscreen;
cancellFullScreen.call(document);

Chrome will display an error: Uncaught (in promise) TypeError: Document not activeif exitFullscreen is called while not in fullscreen mode.

Chrome 将显示错误：Uncaught (in promise) TypeError: Document not active如果 exitFullscreen 在非全屏模式下被调用。

回答by ubershmekel

Krang's answer was great, Carl's idea to modularize was too. But I couldn't easily understand his code. So here's my version in TypeScript:

Krang 的回答很棒，Carl 的模块化想法也很棒。但我无法轻易理解他的代码。所以这是我在 TypeScript 中的版本：

function isInFullScreen() {
  const document: any = window.document;
  return (document.fullscreenElement && document.fullscreenElement !== null) ||
        (document.webkitFullscreenElement && document.webkitFullscreenElement !== null) ||
        (document.mozFullScreenElement && document.mozFullScreenElement !== null) ||
        (document.msFullscreenElement && document.msFullscreenElement !== null);
}

function requestFullScreen(elem: any) {
  if (elem.requestFullscreen) {
    elem.requestFullscreen();
  } else if (elem.mozRequestFullScreen) {
    elem.mozRequestFullScreen();
  } else if (elem.webkitRequestFullScreen) {
    elem.webkitRequestFullScreen();
  } else if (elem.msRequestFullscreen) {
    elem.msRequestFullscreen();
  } else {
    console.warn("Did not find a requestFullScreen method on this element", elem);
  }
}

function exitFullScreen() {
  const document: any = window.document;
  if (document.exitFullscreen) {
    document.exitFullscreen();
  } else if (document.webkitExitFullscreen) {
    document.webkitExitFullscreen();
  } else if (document.mozCancelFullScreen) {
    document.mozCancelFullScreen();
  } else if (document.msExitFullscreen) {
    document.msExitFullscreen();
  }
}

function toggleFullScreen(elem: any) {
  // based on https://stackoverflow.com/questions/36672561/how-to-exit-fullscreen-onclick-using-javascript
  if (isInFullScreen()) {
    exitFullScreen();
  } else {
    requestFullScreen(elem || document.body);
  }
}

回答by jean-baptiste

As of January 2020, in a slightly different scenario where I wanted to toggle fullscreen mode on a video tag, the accepted solution did not work for me on Safari & iOS Safari. On these platforms, the working APIs are webkitEnterFullScreenand webkitExitFullscreenand both should be called on the HTML Element. Therefore in my case the complete code with platform-specific fallbacks was :

截至 2020 年 1 月，在一个稍微不同的场景中，我想在视频标签上切换全屏模式，接受的解决方案在 Safari 和 iOS Safari 上对我不起作用。在这些平台上，工作的APIwebkitEnterFullScreen和webkitExitFullscreen两者都应该在HTML元素被调用。因此，在我的情况下，具有特定于平台的回退的完整代码是：

// Request full screen
const requestVideoFullScreen = videoElt.requestFullscreen || videoElt.webkitEnterFullScreen || videoElt.mozRequestFullScreen || videoElt.msRequestFullScreen;
if (requestVideoFullScreen) {
    requestVideoFullScreen.call(videoElt);
}
...
// Exit full screen
if (videoElt.webkitExitFullscreen) {
    videoElt.webkitExitFullscreen();
} else {
    const cancelVideoFullScreen = document.exitFullscreen || document.mozCancelFullScreen || document.msExitFullscreen;
    if (cancelVideoFullScreen) {
        cancelVideoFullScreen.call(document);
    }
}

Moreover, to use the fullscreen-related events I had to listen to the "webkitbeginfullscreen" and "webkitendfullscreen" events on iOS Safari, and "webkitfullscreenchange" on macOS Safari, as mentioned in this other SO answer.

此外，要使用与全屏相关的事件，我必须在 iOS Safari 上收听“webkitbeginfullscreen”和“webkitendfullscreen”事件，以及在 macOS Safari 上收听“webkitfullscreenchange”，如其他 SO answer 中所述。