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

2019-11-20 08:47:35

字体：大中小

来源：转载

供稿：网友

如果你想使一个元素在全屏模式下展现 (比如说 <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的全屏操控,浏览器兼容的问题全部内容了，希望大家多多支持武林网~

上一篇：a标签跳转到指定div,jquery添加和移除class属性的实现方法

下一篇：js监听键盘事件的方法_原生和jquery的区别详解