Chrome 全屏 API

Posted 2023-02-27

【中文标题】Chrome 全屏 API

【英文标题】：Chrome Fullscreen 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://...

【参考方案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 的工作原理。

推荐阅读：

Using the Fullscreen API in web browsers MDN - Fullscreen 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