Chrome全屏API

70

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

我试图使其工作，但失败了。我也徒劳地搜寻了官方文件。

全屏JavaScript API是什么样的？

javascript google-chrome fullscreen

— 随机蓝
source

这是拟议的规范，即将实施：wiki.mozilla.org/Gecko : FullScreenAPI#Proposed_Specification。

— pimvdb 2011年

尽管他们确实在WebKit中实现了此功能，但我也无法使其运行：bugs.webkit.org/show_bug.cgi?id=43099。这是可能与Chromium有关的bug：code.google.com/p/chromium/issues/detail?id=73923。

— pimvdb 2011年

2

您可以像这样在“信息亭模式”（全屏，无控件）中启动它：chrome.exe –kiosk http：// ...

— Diodeus-James MacFarlane 2011年

143

该API仅在用户交互期间起作用，因此不能被恶意使用。尝试以下代码：

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

    rfs.call(el);
});

— 埃利·格雷（Eli Gray）
source

3

如何定义“用户交互”？

— 2011年

大多数UIEventS和MouseEventS，如click和keydown等

— 伊莱灰色

这对我来说可以进入全屏模式，但是当用户导航到我网站的下一页时，它将退出全屏模式。有什么办法可以避免这种情况？

— alex9311

1

@ alex9311据我所知，您需要使用AJAX来更新内容。您无法离开该页面。

— 迈克尔

这适用于“点击”，但不适用于“ mouseenter”。但是mouseenter还是用户交互。

— 约翰尼，为什么要

35

我为全屏API创建了一个简单的包装，称为screenfull.js，以消除前缀混乱并修复不同实现中的一些不一致之处。查看该演示以查看全屏API的工作方式。

推荐阅读：

— 信德·索尔胡斯（Sindre Sorhus）
source

哇-太棒了，谢谢！当前选项卡保持非全屏状态时，有什么方法可以全屏打开链接吗？在演示中找不到类似的内容。

— cukabeka

16

这是我为在浏览器中使用全屏而创建的一些功能。

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

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

— 德鲁·诺克斯（Drew Noakes）
source

7

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

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

— 莫卡加斯
source

当我从控制台键入“ enterFullScreen（）”时，它不会全屏显示。

— 2011年

3

您必须在希望全屏显示的元素上调用requestFullScreen（）。无法简单地跳入该模式。这里是全屏API的一个极好的说明由约翰·戴尔有一个完整的例子johndyer.name/...

— 莫Kargas

现在链接404。

— 安东尼

0

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

闭包库fullscreen.js API

关闭libray fullscreen.js代码

— 蒙特耶
source