DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> 淺談javascript控制HTML5的全屏操控,浏覽器兼容的問題
淺談javascript控制HTML5的全屏操控,浏覽器兼容的問題
編輯:關於JavaScript     

如果你想使一個元素在全屏模式下展現 (比如說 <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的全屏操控,浏覽器兼容的問題全部內容了,希望大家多多支持~

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved