Chrome 全屏 API答案

【问题标题】：Chrome Fullscreen APIChrome 全屏 API
【发布时间】：2011-12-11 18:44:08
【问题描述】：

根据this article，Google Chrome 15 拥有全屏 JavaScript API。

我试图让它工作但失败了。我也找了官方文档也白费了。

全屏 JavaScript API 是什么样的？

【问题讨论】：

这是将要实施的提议规范：wiki.mozilla.org/Gecko:FullScreenAPI#Proposed_Specification.
我也无法让它工作，尽管他们确实在 WebKit 中实现了这一点：bugs.webkit.org/show_bug.cgi?id=43099。这是可能相关的 Chromium 错误：code.google.com/p/chromium/issues/detail?id=73923.
您可以像这样以“kiosk 模式”（全屏，无控件）启动它：chrome.exe –kiosk http://...

标签： javascript google-chrome fullscreen

【解决方案1】：

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

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

    rfs.call(el);
});

【讨论】：

如何定义“用户交互”？
大部分UIEvents和MouseEvents，如click和keydown等
这对我来说可以进入全屏模式，但是当用户导航到我网站的下一页时，它会退出全屏模式。有什么办法可以避免吗？
@alex9311 据我所知，您需要使用 AJAX 来更新内容。你不能离开这个页面。
这适用于“click”，但不适用于“mouseenter”。但是 mouseenter 也是一个用户交互。

【解决方案2】：

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

推荐阅读：

【讨论】：

哇 - 这么棒的插件，谢谢！有没有办法在当前选项卡保持非全屏状态时全屏打开链接？在演示中没有找到类似的东西。

【解决方案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);
}

【讨论】：

【解决方案4】：

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

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

【讨论】：

当我从控制台输入“enterFullScreen()”时，它不会全屏显示。
您必须对要全屏显示的元素进行 requestFullScreen() 调用。没有办法简单地跳入该模式。这是 John Dyer 对 FullScreen API 的另一个出色描述，并附有完整示例 johndyer.name/…
立即链接 404。

【解决方案5】：

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

Closure library fullscreen.js API

Closure libray fullscreen.js Code

【讨论】：