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 {
...
}
![](https://i-blog.csdnimg.cn/blog_migrate/8505bebbc13810512635497431f326aa.png)
免费学习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之类的可平滑裂缝的库。 祝你好运!
h5的全屏api