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

      [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();   

      熱門文章推薦

      請稍候...
      彩票软件开发公司