js实现浏览器全屏以及退出全屏

原创 Laughing  2017-07-31 23:31  阅读 77 次 评论 0 条

东西很简单,直接上代码

  1. /* 
  2.          * 全屏 
  3.          */  
  4.         function fullScreen(ele) {  
  5.             var fullScreenEnabled = document.fullScreenEnabled || document.webkitFullScreenEnabled || document.mozFullScreenEnabled || document.msFullScreenEnabled;  
  6.             var isFullScreen = document.fullScreenElement || document.webkitFullScreenElement || document.mozFullScreenElement || document.msFullScreenElement;  
  7.             if (fullScreenEnabled === undefined || fullScreenEnabled) {  
  8.                 if (isFullScreen === undefined) {  
  9.                     if (ele.requestFullScreen) {  
  10.                         ele.requestFullScreen();  
  11.                     } else if (ele.webkitRequestFullScreen) {  
  12.                         ele.webkitRequestFullScreen();  
  13.                     } else if (ele.mozRequestFullScreen) {  
  14.                         ele.mozRequestFullScreen();  
  15.                     } else if (ele.msRequestFullScreen) {  
  16.                         ele.msRequestFullScreen();  
  17.                     } else {  
  18.                         console.log('不存在进入全屏的方法! => undefined');  
  19.                     }  
  20.                 } else if (isFullScreen === null) {  
  21.                     if (ele.requestFullScreen) {  
  22.                         ele.requestFullScreen();  
  23.                     } else if (ele.webkitRequestFullScreen) {  
  24.                         ele.webkitRequestFullScreen();  
  25.                     } else if (ele.mozRequestFullScreen) {  
  26.                         ele.mozRequestFullScreen();  
  27.                     } else if (ele.msRequestFullScreen) {  
  28.                         ele.msRequestFullScreen();  
  29.                     } else {  
  30.                         console.log('不存在进入全屏的方法! => null');  
  31.                     }  
  32.                 } else {  
  33.                     console.log('元素已经是全屏状态了!');  
  34.                     return true;  
  35.                 }  
  36.             } else {  
  37.                 console.log('不支持全屏模式!');  
  38.             }  
  39.         }  
  40.   
  41.         /* 
  42.          * 退出全屏 
  43.          */  
  44.         function exitFullScreen() {  
  45.             var fullScreenEnabled = document.fullScreenEnabled || document.webkitFullScreenEnabled || document.mozFullScreenEnabled || document.msFullScreenEnabled;  
  46.             var isFullScreen = document.fullScreenElement || document.webkitFullScreenElement || document.mozFullScreenElement || document.msFullScreenElement;  
  47.             if (fullScreenEnabled === undefined || fullScreenEnabled) {  
  48.                 if (isFullScreen === undefined) {  
  49.                     if (document.exitFullScreen) {  
  50.                         document.exitFullScreen();  
  51.                     } else if (document.webkitExitFullScreen) {  
  52.                         document.webkitExitFullScreen();  
  53.                     } else if (document.webkitCancelFullScreen) {  
  54.                         document.webkitCancelFullScreen();  
  55.                     } else if (document.mozCancelFullScreen) {  
  56.                         document.mozCancelFullScreen();  
  57.                     } else if (document.msExitFullScreen) {  
  58.                         document.msExitFullScreen();  
  59.                     } else if (document.msCancelFullScreen) {  
  60.                         document.msCancelFullScreen();  
  61.                     } else {  
  62.                         console.log('不存在退出全屏的方法! => undefined');  
  63.                     }  
  64.                 } else if (isFullScreen !== null) {  
  65.                     if (document.exitFullScreen) {  
  66.                         document.exitFullScreen();  
  67.                     } else if (document.webkitExitFullScreen) {  
  68.                         document.webkitExitFullScreen();  
  69.                     } else if (document.webkitCancelFullScreen) {  
  70.                         document.webkitCancelFullScreen();  
  71.                     } else if (document.mozCancelFullScreen) {  
  72.                         document.mozCancelFullScreen();  
  73.                     } else if (document.msExitFullScreen) {  
  74.                         document.msExitFullScreen();  
  75.                     } else if (document.msCancelFullScreen) {  
  76.                         document.msCancelFullScreen();  
  77.                     } else {  
  78.                         console.log('不存在退出全屏的方法! => null');  
  79.                     }  
  80.                 } else {  
  81.                     console.log('元素已经是非全屏状态了!');  
  82.                     return true;  
  83.                 }  
  84.             } else {  
  85.                 console.log('不支持全屏模式!');  
  86.             }  
  87.         }  
本文地址:https://www.lisen.me/js-implementation-browser-full-screen-and-exit-full-screen.html
版权声明:本文为原创文章,版权归 木子网 所有,欢迎分享本文,转载请保留出处!

发表评论


表情