Chrome Fullscreen API

Question

根据this article的说法，谷歌Chrome15有一个全屏JavaScript应用程序接口。

我试过让它工作，但失败了。我还搜索了官方文件，但都是徒劳的。

全屏JavaScript API是什么样子的？

Answer 1

该接口仅在用户交互过程中起作用，因此不会被恶意使用。尝试以下代码：

addEventListener("click", function() {
    var el = document.documentElement,
      rfs = el.requestFullscreen
        || el.webkitRequestFullScreen
        || el.mozRequestFullScreen
        || el.msRequestFullscreen 
    ;

    rfs.call(el);
});

Answer 2

我为Fullscreen API创建了一个简单的包装器，名为screenfull.js，以消除前缀混乱并修复不同实现中的一些不一致。查看demo，看看Fullscreen API是如何工作的。

推荐阅读：

• Using the Fullscreen API in web browsers
• MDN - Fullscreen API

Answer 3

以下是我为在浏览器中使用全屏而创建的一些函数。

它们在大多数主流浏览器上都提供了进入/退出全屏功能。

function isFullScreen()
{
    return (document.fullScreenElement && document.fullScreenElement !== null)
         || document.mozFullScreen
         || document.webkitIsFullScreen;
}


function requestFullScreen(element)
{
    if (element.requestFullscreen)
        element.requestFullscreen();
    else if (element.msRequestFullscreen)
        element.msRequestFullscreen();
    else if (element.mozRequestFullScreen)
        element.mozRequestFullScreen();
    else if (element.webkitRequestFullscreen)
        element.webkitRequestFullscreen();
}

function exitFullScreen()
{
    if (document.exitFullscreen)
        document.exitFullscreen();
    else if (document.msExitFullscreen)
        document.msExitFullscreen();
    else if (document.mozCancelFullScreen)
        document.mozCancelFullScreen();
    else if (document.webkitExitFullscreen)
        document.webkitExitFullscreen();
}

function toggleFullScreen(element)
{
    if (isFullScreen())
        exitFullScreen();
    else
        requestFullScreen(element || document.documentElement);
}