Javascript Chrome 全屏 API

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/7836204/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-24 03:47:02  来源:igfitidea点击:

Chrome Fullscreen API

javascriptgoogle-chromefullscreen

提问by Randomblue

According to this articleGoogle Chrome 15 has a fullscreen JavaScript API.

根据这篇文章Google Chrome 15 有一个全屏 JavaScript API。

I have tried to make it work but failed. I have also searched for official documentation in vain.

我试图让它工作但失败了。我也徒劳地搜索了官方文档。

What does the fullscreen JavaScript API look like?

全屏 JavaScript API 是什么样的?

回答by Eli Grey

The API only works during user interaction, so it cannot be used maliciously. Try the following code:

该 API 仅在用户交互期间起作用,因此不能被恶意使用。试试下面的代码:

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

    rfs.call(el);
});

回答by Sindre Sorhus

I made a simple wrapper for the Fullscreen API, called screenfull.js, to smooth out the prefix mess and fix some inconsistencies in the different implementations. Check out the demoto see how the Fullscreen API works.

我为 Fullscreen API 制作了一个简单的包装器,称为screenfull.js,以消除前缀混乱并修复不同实现中的一些不一致。查看演示以了解 Fullscreen API 的工作原理。

Recommended reading:

推荐阅读:

回答by Drew Noakes

Here are some functions I created for working with fullscreen in the browser.

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

They provide both enter/exit fullscreen across most major browsers.

它们在大多数主要浏览器中都提供进入/退出全屏显示。

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);
}

回答by Mo Kargas

The following test works in Chrome 16 (dev branch) on X86 and Chrome 15 on Mac OSX Lion

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

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

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

回答by monjer

In Google's closure library project , there is a module which has do the job , below is the API and source code.

在谷歌的闭包库项目中,有一个模块可以完成这项工作,下面是 API 和源代码。

Closure library fullscreen.js API

关闭库 fullscreen.js API

Closure libray fullscreen.js Code

关闭库 fullscreen.js 代码