Chrome全屏API

Question

根据这篇文章,谷歌Chrome 15有一个全屏JavaScript API.

我试图让它工作但失败了.我也搜索了官方文件是徒劳的.

全屏JavaScript API是什么样的？

Answer 1

API仅在用户交互期间有效,因此不能恶意使用.请尝试以下代码:

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,以消除前缀混乱并修复不同实现中的一些不一致.查看演示以了解Fullscreen API的工作原理.

推荐阅读:

• 在Web浏览器中使用Fullscreen API
• MDN - 全屏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);
}

Answer 4

以下测试适用于X86上的Chrome 16(开发分支)和Mac OSX Lion上的Chrome 15

http://html5-demos.appspot.com/static/fullscreen.html