·您當前的位置:主頁 > 技術教程 > 微信視頻 >

[html5]HTML5全屏與退出全屏的API

時間:2017-12-29 14:58csdn.net
[html5]HTML5全屏與退出全屏的API

翻譯人員: 鐵錨
原文日期: 2013年12月23日
翻譯日期: 2013年12月29日
原文鏈接: Fullscreen API

在越來越真實的web應用程序中,JavaScript也變得越來越給力.
FullScreen API 是一個新的JavaScript API,簡單而又強大. FullScreen 讓我們可以通過編程的方式來向用戶請求全屏顯示,如果交互完成,隨時可以退出全屏狀態.
在線演示Demo:  Fullscreen API Example
(在此Demo中,可以Launch ,Hide ,以及Dump顯示相關屬性,可以通過chrome的控制臺查看日志信息.)

啟動全屏模式
全屏API requestFullscreen方法在一些老的瀏覽器里面依然使用帶前綴形式的方法名,因此可能需要進行檢測判斷:
(帶前綴,意思就是各個瀏覽器內核不通用.)

  1. // 找到支持的方法, 使用需要全屏的 element 調用   
  2. function launchFullScreen(element) {   
  3.   if(element.requestFullscreen) {   
  4.     element.requestFullscreen();   
  5.   } else if(element.mozRequestFullScreen) {   
  6.     element.mozRequestFullScreen();   
  7.   } else if(element.webkitRequestFullscreen) {   
  8.     element.webkitRequestFullscreen();   
  9.   } else if(element.msRequestFullscreen) {   
  10.     element.msRequestFullscreen();   
  11.   }   
  12. }   
  13.    
  14.    
  15. // 在支持全屏的瀏覽器中啟動全屏   
  16. // 整個頁面   
  17. launchFullScreen(document.documentElement);   
  18. // 某個元素   
  19. launchFullScreen(document.getElementById("videoElement"));   

將需要全屏顯示的DOM元素作為參數,調用此方法即可讓window進入全屏狀態,有時候可能需要用戶同意(瀏覽器自己和用戶交互),假若用戶拒絕,則可能出現各種不完全的全屏.
如果用戶同意進入全屏,那么工具欄以及其他瀏覽器組件會隱藏起來,使document框架的寬度和高度橫跨整個屏幕.

退出全屏模式
使用 exitFullscreen 方法可以使瀏覽器退出全屏,返回原先的布局. 該方法在一些老的瀏覽器上也是支持前綴方法.

  1. // 退出 fullscreen   
  2. function exitFullscreen() {   
  3.   if(document.exitFullscreen) {   
  4.     document.exitFullscreen();   
  5.   } else if(document.mozExitFullScreen) {   
  6.     document.mozExitFullScreen();   
  7.   } else if(document.webkitExitFullscreen) {   
  8.     document.webkitExitFullscreen();   
  9.   }   
  10. }   
  11.    
  12.    
  13. // 調用退出全屏方法!   
  14. exitFullscreen();   

熱門文章推薦

請稍候...
北京快乐八开奖结果