浅谈javascript控制HTML5的全屏操控,浏览器兼容的问题

【字号: 日期:2024-05-11浏览:43作者:雯心

如果你想使一个元素在全屏模式下展现 (比如说 ),你可以调用该元素的 requestFullscreen() 方法;这个方法在 Gecko 中的实现是 element.mozRequestFullScreen(),在 WebKit 中为 element.webkitRequestFullscreen()。

比如一个实例:

浅谈javascript控制HTML5的全屏操控,浏览器兼容的问题

运行到这里,Gecko 与 WebKit 两个实现中出现了一个值得注意的区别:Gecko 会为元素自动添加 CSS 使其伸展以便铺满屏幕: "width: 100%; height: 100%"。 WebKit 则不会这么做;它会让全屏的元素以原始尺寸居中到屏幕中央,其余部分变为黑色。为了在 WebKit 下也达到与 Gecko 同样的全屏效果,你需要手动为元素增加 CSS 规则"width: 100%; height: 100%;":

浅谈javascript控制HTML5的全屏操控,浏览器兼容的问题

代码首先检查了 document 上的 fullscreenElement 属性(也检查了带 -moz- 与 -webkit- 两个前缀的)。如果该属性为 null,则 document 当前处于窗口模式,所以我们需要切换进全屏模式。可以通过调用 element.mozRequestFullScreen() 或者 webkitRequestFullscreen()来进入全屏模式,具体调用哪个还要看哪个方法可用。

如果已经激活了全屏模式 (fullscreenElement 非空),我们调用 document.mozCancelFullScreen() 或 webkitCancelFullScreen(),同样要依赖于我们使用了哪个浏览器。

相关文章: