下面小编就为大家带来一篇浅谈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的全屏操控,浏览器兼容的问题全部内容了，希望大家多多支持脚本之家~
您可能感兴趣的文章: