h5的全屏api_再次使用HTML5全屏API

h5的全屏api

如果您不喜欢更改，那么也许Web开发不适合您。 我之前在2012年末描述了全屏API ，尽管我声称实施细节可能会进行修订，但我认为一年后不需要重写！ 这可能不是最后一次，但是非常感谢David Storey强调了最近的技术过渡…

什么是全屏API？

该API允许全屏查看单个元素。 与按F11强制浏览器全屏显示不同，该API适用于在容器内运行的图像，视频和游戏。 当您进入全屏模式时，将显示一条消息，通知用户可以随时按ESC返回页面。

现在，所有最新的桌面浏览器（包括IE11）都支持全屏API。 移动设备上几乎没有支持，但是这些浏览器通常以几乎全屏视图运行。 不幸的是，我们存在细微的差异，前缀要求和跨浏览器不一致的问题来解决……

JavaScript API

假设我们有一个ID为myimage的图像，我们想全屏查看。 主要方法和属性是：

document.fullscreenEnabled （已更改）
当文档处于允许全屏模式的状态时，此属性返回true 。 它也可以用于确定浏览器支持：

if (document.fullscreenEnabled) { ... }

较早的实现在“屏幕”中具有大写的“ S”，而Firefox仍然需要它。 添加前缀会导致更长的跨浏览器代码：

// full-screen available?
if (
	document.fullscreenEnabled || 
	document.webkitFullscreenEnabled || 
	document.mozFullScreenEnabled ||
	document.msFullscreenEnabled
) {
...
}

Opera 12是唯一不要求前缀的浏览器，但Opera 15+使用webkit 。

element.requestFullscreen（） （已更改）
此方法使单个元素全屏显示，例如

document.getElementById("myimage").requestFullscreen();

同样，“屏幕”已切换为小写。 跨浏览器代码：

var i = document.getElementById("myimage");

// go full-screen
if (i.requestFullscreen) {
	i.requestFullscreen();
} else if (i.webkitRequestFullscreen) {
	i.webkitRequestFullscreen();
} else if (i.mozRequestFullScreen) {
	i.mozRequestFullScreen();
} else if (i.msRequestFullscreen) {
	i.msRequestFullscreen();
}

document.fullscreenElement （已更改）
此属性返回当前全屏显示的元素；如果不全屏显示，则返回null ：

if (document.fullscreenElement) { ... }

“屏幕”现在为小写。 跨浏览器代码：

// are we full-screen?
if (
	document.fullscreenElement ||
	document.webkitFullscreenElement ||
	document.mozFullScreenElement ||
	document.msFullscreenElement
) {
...
}

document.exitFullscreen （已更改）
此方法取消全屏模式：

document.exitFullscreen;

同样，我们有一个小写的“屏幕”。 它以前被称为cancelFullScreen ，现在仍在Firefox中。 跨浏览器代码：

// exit full-screen
if (document.exitFullscreen) {
	document.exitFullscreen();
} else if (document.webkitExitFullscreen) {
	document.webkitExitFullscreen();
} else if (document.mozCancelFullScreen) {
	document.mozCancelFullScreen();
} else if (document.msExitFullscreen) {
	document.msExitFullscreen();
}

document.fullscreenchange事件
移入和移出全屏视图时会触发此事件。 该事件没有提供任何信息，但是您可以通过检查document.fullscreenElement是否不为null来确定是否启用了全屏。

document.addEventListener("fullscreenchange", function() { ... });

名称没有更改，但是我们需要IE的跨浏览器前缀和驼峰式外壳：

document.addEventListener("fullscreenchange", FShandler);
document.addEventListener("webkitfullscreenchange", FShandler);
document.addEventListener("mozfullscreenchange", FShandler);
document.addEventListener("MSFullscreenChange", FShandler);

document.fullscreenerror事件
全屏可能会失败。 例如，可能会阻止没有allowfullscreen属性或窗口插件内容的iframe。 因此，可能会触发fullscreenerror事件：

document.addEventListener("fullscreenerror", function() { ... });

名称没有更改，但是我们需要IE的跨浏览器前缀和驼峰式外壳：

document.addEventListener("fullscreenerror", FSerrorhandler);
document.addEventListener("webkitfullscreenerror", FSerrorhandler);
document.addEventListener("mozfullscreenerror", FSerrorhandler);
document.addEventListener("MSFullscreenError", FSerrorhandler);

全屏CSS

我们还可以影响CSS中的全屏样式...

：fullscreen伪类 （已更改）
在全屏模式下查看时，可以将样式应用于元素或其子元素：

:fullscreen {
	...
}

免费学习PHP！

全面介绍PHP和MySQL，从而实现服务器端编程的飞跃。

原价$ 11.95 您的完全免费

免费获得这本书

它以前称为:full-screen ，现在仍在Webkit和Firefox中使用。 对于跨浏览器的代码：

:-webkit-full-screen {
}

:-moz-full-screen {
}

:-ms-fullscreen {
}

:fullscreen {
}

::背景 （新）
全屏查看具有不同纵横比的元素时，可以应用颜色或图像背景：

:fullscreen::backdrop {
	background-color: #006; /* dark blue */
}

背景是在全屏元素之后但在所有其他页面内容之上的伪元素。 IE11支持此功能，但Firefox和Opera 12不支持。Chrome，Safari和Opera 15+包含background元素，但不允许对其设置样式。 目前，您只能定位IE11，例如

:-ms-fullscreen::-ms-backdrop {
	background-color: #006; /* dark blue */
}

样式差异

在IE11，Firefox和Opera 12中，全屏元素设置为100％的宽度和高度。 因此，图像被拉伸，宽高比被忽略。 在IE11中设置宽度和高度会将全屏元素放置在具有深色背景的左上角（可通过:: backdrop进行配置）。 Opera 12与IE11类似，但显示的是透明背景。 Firefox忽略尺寸。 在Chrome，Safari和Opera 15+中，元素以黑色背景居中。

如果您需要某种一致性，可以很容易地使Webkit / Blink浏览器像Firefox / IE11那样延伸：

:-webkit-full-screen {
	position: fixed;
	width: 100%;
	top: 0;
	background: none;
}

或者，您可以使IE11遵循Webkit / Blink居中：

:-ms-fullscreen {
  width: auto;
  height: auto;
  margin: auto;
}

如上所述，此方法在Firefox中无效，后者忽略了宽度和高度。 要解决此问题，您需要使父元素全屏显示，并应用适当的大小， 如本示例所示 。

准备部署？

HTML5全屏API相对简单，但是浏览器的差异导致代码很丑陋，并且无法保证不会再次更改。 情况将有所改善，因此最好花时间和精力在其他功能上，直到API变得更加稳定为止。

也就是说，全屏对于HTML5游戏和大量视频网站至关重要。 如果您不想自己维护代码，请考虑使用诸如screenfull.js之类的可平滑裂缝的库。 祝你好运！

翻译自: https://www.sitepoint.com/use-html5-full-screen-api/

h5的全屏api