如何使用HTML5全屏API

最新推荐文章于 2021-12-08 16:07:20 发布

dingshi7798

最新推荐文章于 2021-12-08 16:07:20 发布

阅读量91

点赞数

更新：本文现已过时。请参阅更新的版本，如何使用HTML5全屏API（再次）。

Flash提供全屏模式已经有很多年了，但是直到现在，浏览器供应商都拒绝使用该功能。主要原因：安全性。如果您可以强制应用程序全屏运行，则用户将丢失其浏览器，任务栏和标准操作系统控件。他们可能无法关闭窗口，或者更糟糕的是，邪恶的开发人员可能会模仿操作系统并诱使用户交出密码，信用卡详细信息等。

在撰写本文时，HTML5全屏API已在Firefox，Chrome和Safari中实现。 Mozilla提供了良好的跨浏览器详细信息，但值得注意的是规范和实现的详细信息可能会发生变化。

与按F11键使浏览器全屏显示不同，API会将单个元素设置为全屏显示。适用于使用canvas元素的图像，视频和游戏。元素全屏显示后，会暂时出现一条消息，通知用户可以随时按ESC返回窗口模式。

主要属性，方法和样式是：

element.requestFullScreen（）
使单个元素全屏显示，例如document.getElementById（“ myvideo”）。requestFullScreen（）。

document.cancelFullScreen（）
退出全屏模式并返回到文档视图。

document.fullScreen
如果浏览器处于全屏模式，则返回true。

：全屏
一个CSS伪类，适用于处于全屏模式的元素。

令人恼火的供应商前缀

不要打扰尝试使用这些API名称。你将需要持续的 CSS和JavaScript属性供应商前缀：

标准	Chrome / Safari	火狐浏览器
.requestFullScreen（）	.webkitRequestFullScreen（）	.mozRequestFullScreen（）
.cancelFullScreen（）	.webkitCancelFullScreen（）	.mozCancelFullScreen（）
。全屏	.webkitIsFullScreen	.mozfullScreen
：全屏	：-webkit-全屏	：-moz全屏

Internet Explorer或Opera中尚不支持，但我建议您使用'ms'和'o'前缀进行将来的校对。

我在演示页面上开发了一个函数，可以为您处理前缀恶作剧：


var pfx = ["webkit", "moz", "ms", "o", ""];
function RunPrefixMethod(obj, method) {
	
	var p = 0, m, t;
	while (p < pfx.length && !obj[m]) {
		m = method;
		if (pfx[p] == "") {
			m = m.substr(0,1).toLowerCase() + m.substr(1);
		}
		m = pfx[p] + m;
		t = typeof obj[m];
		if (t != "undefined") {
			pfx = [pfx[p]];
			return (t == "function" ? obj[m]() : obj[m]);
		}
		p++;
	}

}

然后，我们可以通过附加处理程序函数使任何元素在全屏可见，该处理函数确定该元素是否已处于全屏模式并采取相应的行动：


var e = document.getElementById("fullscreen");

e.onclick = function() {

	if (RunPrefixMethod(document, "FullScreen") || RunPrefixMethod(document, "IsFullScreen")) {
		RunPrefixMethod(document, "CancelFullScreen");
	}
	else {
		RunPrefixMethod(e, "RequestFullScreen");
	}

}

CSS

浏览器进入全屏模式后，您几乎肯定会想要修改该元素及其子元素的样式。例如，如果您的元素通常具有500px的宽度，则需要将其更改为100％，以便使用可用空间，例如


#myelement
{
	width: 500px;
}

#myelement:full-screen
{
	width: 100%;
}

#myelement:full-screen img
{
	width: 100%;
}

但是， 您不能使用供应商前缀选择器的列表 ：


/* THIS DOES NOT WORK */
#myelement:-webkit-full-screen,
#myelement:-moz-full-screen,
#myelement:-ms-full-screen,
#myelement:-o-full-screen,
#myelement:full-screen
{
	width: 100%;
}

出于某些奇怪的原因，您必须在自己的块中重复样式，否则将不会应用它们：


/* this works */
#myelement:-webkit-full-screen	{ width: 100% }
#myelement:-moz-full-screen		{ width: 100% }
#myelement:-ms-full-screen		{ width: 100% }
#myelement:-o-full-screen		{ width: 100% }
#myelement:full-screen			{ width: 100% }

奇怪的。

在Firefox，Chrome或Safari中查看演示页面…

该技术效果很好。我发现的唯一问题与在两显示器桌面上的Safari有关–即使浏览器在第二屏幕上运行，它仍坚持将第一台显示器用于全屏模式？

虽然使用全屏模式可能还为时过早，但游戏开发人员和视频制作人员应密切注意进度。

如果您喜欢阅读这篇文章，您会喜欢Learnable的； 向大师学习新鲜技能的地方。 会员可以立即访问所有SitePoint的电子书和交互式在线课程，例如针对真实世界的HTML5和CSS3 。

本文的评论已关闭。 对HTML5有疑问吗？ 为什么不在我们的论坛上提问呢？

From: https://www.sitepoint.com/html5-full-screen-api/