快捷導(dǎo)航

淺談javascript控制HTML5的全屏操控,瀏覽器兼容的問(wèn)題

更新時(shí)間：2016年10月10日 09:23:35 投稿：jingxian

下面小編就為大家?guī)?lái)一篇淺談javascript控制HTML5的全屏操控,瀏覽器兼容的問(wèn)題。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧

如果你想使一個(gè)元素在全屏模式下展現(xiàn) (比如說(shuō) <video>)，你可以調(diào)用該元素的 requestFullscreen() 方法；這個(gè)方法在 Gecko 中的實(shí)現(xiàn)是 element.mozRequestFullScreen()，在 WebKit 中為 element.webkitRequestFullscreen()。

比如一個(gè)實(shí)例：

var elem = document.getElementById("myvideo");
if (elem.requestFullscreen) {
 elem.requestFullscreen();		//IE瀏覽器
} else if (elem.mozRequestFullScreen) {
 elem.mozRequestFullScreen();			//火狐瀏覽器
} else if (elem.webkitRequestFullscreen) {
 elem.webkitRequestFullscreen();			//谷歌瀏覽器
}

運(yùn)行到這里，Gecko 與 WebKit 兩個(gè)實(shí)現(xiàn)中出現(xiàn)了一個(gè)值得注意的區(qū)別：Gecko 會(huì)為元素自動(dòng)添加 CSS 使其伸展以便鋪滿屏幕： "width: 100%; height: 100%"。 WebKit 則不會(huì)這么做；它會(huì)讓全屏的元素以原始尺寸居中到屏幕中央，其余部分變?yōu)楹谏?。為了?WebKit 下也達(dá)到與 Gecko 同樣的全屏效果，你需要手動(dòng)為元素增加 CSS 規(guī)則"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- 兩個(gè)前綴的)。如果該屬性為 null，則 document 當(dāng)前處于窗口模式，所以我們需要切換進(jìn)全屏模式?？梢酝ㄟ^(guò)調(diào)用 element.mozRequestFullScreen() 或者 webkitRequestFullscreen()來(lái)進(jìn)入全屏模式，具體調(diào)用哪個(gè)還要看哪個(gè)方法可用。

如果已經(jīng)激活了全屏模式 (fullscreenElement 非空)，我們調(diào)用 document.mozCancelFullScreen() 或 webkitCancelFullScreen()，同樣要依賴于我們使用了哪個(gè)瀏覽器。

以上就是小編為大家?guī)?lái)的淺談javascript控制HTML5的全屏操控,瀏覽器兼容的問(wèn)題全部?jī)?nèi)容了，希望大家多多支持腳本之家~

您可能感興趣的文章: