A simple library for using the JavaScript Full Screen API.

当前项目代码仓暂无内容

自动翻译

大屏幕

一个简单易用的 JavaScript 全屏 API 库。

我为什么要用这个库？

BigScreen 能让在您的网站或应用程序中使用全屏变得更加简单。它能够平滑处理不同浏览器之间的不一致性和错误，尤其是在您操作的元素位于 <iframe> 内部时。如果元素中包含 <video> 标签并且旧的全屏 API 可用，它还会智能地回退到旧的视频全屏 API。

下载

BigScreen 压缩后大小约为 1.4 kb。立即下载。

支持的浏览器

Chrome 15+
Firefox 10+
Safari 5.1+
Internet Explorer 11
Opera 12.1+
安卓版 Firefox 18+
安卓版 Chrome 32+

以下浏览器仅支持视频全屏：

Safari 5.0
iOS 4.2+
安卓浏览器 2.1+
安卓版 Chrome 32 以下版本

（查看 caniuse 获取最新信息）

演示

如何使用？

将整个页面设置为全屏模式

document.getElementById('button').addEventListener('click', function() {
	if (BigScreen.enabled) {
		BigScreen.toggle();
	}
	else {
		// fallback
	}
}, false);

将任意元素置于全屏显示

var element = document.getElementById('target');

document.getElementById('button').addEventListener('click', function() {
	if (BigScreen.enabled) {
		BigScreen.request(element, onEnter, onExit, onError);
		// You could also use .toggle(element, onEnter, onExit, onError)
	}
	else {
		// fallback for browsers that don't support full screen
	}
}, false);

全局检测全屏模式变化

BigScreen.onenter = function() {
	// called when the first element enters full screen
}

BigScreen.onchange = function() {
	// called any time the full screen element changes
}

BigScreen.onexit = function() {
	// called when all elements have exited full screen
}

文档

BigScreen.request(element[, onEnter, onExit, onError])

请求一个元素进入全屏模式。如果元素为假值，将使用 <body> 代替。

您只能从用户触发的事件中调用此方法，否则浏览器将拒绝请求。这意味着可以是键盘、触摸、鼠标或指针事件。

另外，如果您的页面位于 <iframe> 内，则需要在 <iframe> 上设置 allowfullscreen（以及 webkitallowfullscreen 和 mozallowfullscreen）属性。

最后，如果传递的元素中有一个子 <video> 元素且浏览器支持（请参阅 BigScreen.videoEnabled），BigScreen 将尝试为 <video> 启用全屏。如果 BigScreen 采用后备方案，它将自动加载视频的元数据，以便视频可以进入全屏模式。

您可以可选地传递回调函数，用于当元素进入或退出全屏模式，或进入全屏模式时发生错误。对于所有回调函数，this 的值将设置为请求的元素。实际进入全屏的元素将作为 onEnter 的第一个参数传递。

BigScreen.exit()

退出全屏模式。注意，如果存在多个全屏元素，只有最后一个元素会退出全屏。

BigScreen.toggle(element[, onEnter, onExit, onError])

如果当前没有全屏元素，则请求全屏；否则退出全屏。

BigScreen.onenter(element)

重写此方法以在第一个元素进入全屏时获得通知。如果后续元素被添加到全屏堆栈中，将不会触发此方法（请使用 onchange）。

BigScreen.onchange(element)

重写此方法以在任意时刻全屏元素发生变化时获得通知。当前显示在全屏中的元素将作为第一个参数传递。

BigScreen.onexit()

重写此方法以在完全退出全屏时（没有更多元素在全屏中）获得通知。

BigScreen.onerror(element, reason)

如果将元素发送到全屏时发生错误，请重写此方法以获得通知。reason 的可能值为：

not_supported：完全不支持全屏或对此元素不支持
not_enabled：请求是由没有 allowfullscreen 属性的框架发起的，或者用户在浏览器中禁用了全屏（但支持全屏）
not_allowed：请求失败，可能因为不是从用户触发的事件中调用

这些值也会传递给单独的 onError 回调。

BigScreen.element

设置为当前显示全屏的元素，如果没有元素在全屏中则为 null。

BigScreen.enabled

一个布尔值，用于告诉您是否可以进入全屏模式。如果页面位于 <iframe> 中，则需要设置 allowfullscreen 属性，否则此值为 false。

BigScreen.videoEnabled(video)

Safari 5.0 和 iOS 4.2+ 支持 <video> 进入全屏。在那些浏览器中 BigScreen.enabled 会报告 false，但您可以通过传递 <video> 本身或其祖先元素来检查 <video> 的全屏支持。

如果没有任何子 <video> 或无法将 <video> 置于全屏，此函数将报告 false。如果可能但视频的元数据尚未加载，则报告 'maybe'；如果能够进入全屏，则报告 true。

已知全屏 API 问题

Safari 6.0 在将多个元素放入全屏时无法正常工作。打开 Radar 故障报告。

目前在 Safari 中有一个错误（曾在 WebKit 中，但已被修复并合并到 Chrome 22）导致在 iframe 内时 webkitfullscreenchange 事件错误触发。不过 BigScreen 能够绕过这个问题。（Safari 错误：rdar://problem/11927884）

链接

许可

项目介绍