这里有新鲜出炉的 Javascript 教程,程序狗速度看过来!
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
下面小编就为大家带来一篇浅谈 javascript 控制 html5 的全屏操控, 浏览器兼容的问题。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
如果你想使一个元素在全屏模式下展现 (比如说 <video>),你可以调用该元素的 requestFullscreen() 方法;这个方法在 Gecko 中的实现是 element.mozRequestFullScreen(),在 webKit 中为 element.webkitRequestFullscreen()。
比如一个实例:
- var elem = document.getElementById("myvideo");
- if (elem.requestFullscreen) {
- elem.requestFullscreen(); //IE浏览器
- } else if (elem.mozRequestFullScreen) {
- elem.mozRequestFullScreen(); //火狐浏览器
- } else if (elem.webkitRequestFullscreen) {
- elem.webkitRequestFullscreen(); //谷歌浏览器
- }
运行到这里,Gecko 与 WebKit 两个实现中出现了一个值得注意的区别:Gecko 会为元素自动添加 CSS 使其伸展以便铺满屏幕: "width: 100%; height: 100%"。 WebKit 则不会这么做;它会让全屏的元素以原始尺寸居中到屏幕中央,其余部分变为黑色。为了在 WebKit 下也达到与 Gecko 同样的全屏效果,你需要手动为元素增加 CSS 规则 "width: 100%; height: 100%;":
- function toggleFullScreen() {
- if (!document.fullscreenElement && // alternative standard method
- !document.mozFullScreenElement && !document.webkitFullscreenElement) { // current working methods
- if (document.documentElement.requestFullscreen) {
- document.documentElement.requestFullscreen();
- } else if (document.documentElement.mozRequestFullScreen) {
- document.documentElement.mozRequestFullScreen();
- } else if (document.documentElement.webkitRequestFullscreen) {
- document.documentElement.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
- }
- } else {
- if (document.cancelFullScreen) {
- document.cancelFullScreen();
- } else if (document.mozCancelFullScreen) {
- document.mozCancelFullScreen();
- } else if (document.webkitCancelFullScreen) {
- document.webkitCancelFullScreen();
- }
- }
- }
代码首先检查了 document 上的 fullscreenElement 属性 (也检查了带 -moz- 与 -webkit- 两个前缀的)。如果该属性为 null,则 document 当前处于窗口模式,所以我们需要切换进全屏模式。可以通过调用 element.mozRequestFullScreen() 或者 webkitRequestFullscreen() 来进入全屏模式,具体调用哪个还要看哪个方法可用。
如果已经激活了全屏模式 (fullscreenElement 非空),我们调用 document.mozCancelFullScreen() 或 webkitCancelFullScreen(),同样要依赖于我们使用了哪个浏览器。
以上就是小编为大家带来的浅谈 javascript 控制 HTML5 的全屏操控, 浏览器兼容的问题全部内容了,希望大家多多支持 phperz~
来源: http://www.phperz.com/article/17/0511/331329.html