javascript - 我们如何以编程方式在 javascript 中进入和退出全屏模式？

Question

Here's documentation on exiting fullscreen mode.

我使用了这段代码，我学会了让浏览器进入全屏模式(它有效)，但我尝试修改它的一个版本以退出全屏模式失败了。处理这些非标准 API 有点棘手，每个浏览器的实现方式都有所不同。

代码如下:

// Bring the page into full-screen mode - Works!
function requestFullScreen(element) {

    // Supports most browsers and their versions.
    var requestMethod = element.requestFullScreen || 
        element.webkitRequestFullScreen           || 
        element.mozRequestFullScreen              || 
        element.msRequestFullScreen;
    if (requestMethod) {
        requestMethod.call(element);
    } else if ( typeof window.ActiveXObject !== "undefined") {
        var wscript = new ActiveXObject("WScript.Shell");
        if (wscript !== null) {
            wscript.SendKeys("{F11}");
        }
    }
}

// Exit fullscreen - Doesn't work!
function exitFullScreen(element){
    var requestMethod = element.exitFullscreen || 
        element.mozCancelFullScreen            || 
        element.webkitExitFullscreen           || 
        element.msExitFullscreen;
    if (requestMethod) {
        requestMethod();
    } else {
        console.log("Oops. Request method false.");
    }
}

和调用:

var $fullscreenButton = $("#fullscreen-button");
var $smallscreenButton = $("#smallscreen-button");

$fullscreenButton.on("click", function() {
    var elem = document.body;

    // Make the body go full screen.
    requestFullScreen(elem);
});

$smallscreenButton.on("click", function() {
    var elem = document.body;

    // Exit full screen.
    exitFullScreen(elem);
});

exitFullScreen 函数有什么问题？我该如何解决？

编辑:

• 我正在为此开发一个 JSFiddle!
• “不起作用”是指它输出 “Oops. Request method false.”
• 我正在使用参数 document.body 调用函数 exitFullScreen()

JSFiddle:

虽然全屏请求功能在浏览器中对我来说正常工作，I could not get it to work in JSFiddle ，我不确定这是因为我自己的错误，还是与 JSFiddle 有关。

Answer 1

进入全屏时出现了一些大写问题。

对于退出你需要在document上调用它而不是在body上，你还需要正确地应用它而不是调用对方法的引用..

所以 requestMethod.call(element); 也用于退出。

参见 http://jsfiddle.net/gaby/FGX72/show 的演示
(在最新的 IE/Chrome/FireFox 上测试)