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

前端之家收集整理的这篇文章主要介绍了我们如何以编程方式在javascript中进入和退出全屏模式?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
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工作!
>通过“不工作”,我的意思是它输出“糟糕.请求方法错误”.
>我正在使用参数document.body调用函数exitFullScreen()

的jsfiddle:

虽然全屏请求功能通常在浏览器中适用于我,I could not get it to work in JSFiddle,我不确定这是因为我自己的错误,还是与JSFiddle有关.

解决方法

为了进入全屏,大写有一些问题.

对于退出,您需要在文档而不是正文上调用它,并且还需要正确应用它而不是调用方法的引用.

所以requestMethod.call(element);也是为了退出.

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

猜你在找的JavaScript相关文章