点击控件报表全屏JS

楼主
我是社区第98891位番薯,欢迎点我头像关注我哦~
因为最近大屏展示的电脑没接键盘,需要用到点击的方式使网页报表全屏,所以加了这个功能,分享给小伙伴们。在要用的控件的事件里添加如下的代码就可以实现。


  1. var docElm = document.documentElement;
  2. var explorer = window.navigator.userAgent.toLowerCase();
  3. if(explorer.indexOf('chrome')>0){//webkit
  4.      if (document.body.scrollHeight === window.screen.height && document.body.scrollWidth === window.screen.width) {
  5.      if (document.exitFullscreen) {
  6.       document.exitFullscreen();
  7.     }
  8.     else if (document.msExitFullscreen) {
  9.       document.msExitFullscreen();
  10.     }
  11.     else if (document.mozCancelFullScreen) {
  12.       document.mozCancelFullScreen();
  13.     }
  14.     else if (document.webkitCancelFullScreen) {
  15.       document.webkitCancelFullScreen();
  16.     }
  17.   
  18.          } else {
  19.              //W3C
  20.                 if(docElm.requestFullscreen){
  21.                         docElm.requestFullscreen();
  22.                 }
  23.                 //FireFox
  24.                 else if(docElm.mozRequestFullScreen){
  25.                         docElm.mozRequestFullScreen();
  26.                 }
  27.                 //Chrome等
  28.                 else if(docElm.webkitRequestFullScreen){
  29.                         docElm.webkitRequestFullScreen();
  30.                 }
  31.                 //IE11
  32.                 else if(elem.msRequestFullscreen){
  33.                         elem.msRequestFullscreen();
  34.                 }
  35.          }
  36. }else{//IE 9+  fireFox
  37. if (window.outerHeight === window.screen.height && window.outerWidth === window.screen.width) {
  38.      if (document.exitFullscreen) {
  39.       document.exitFullscreen();
  40.     }
  41.     else if (document.msExitFullscreen) {
  42.       document.msExitFullscreen();
  43.     }
  44.     else if (document.mozCancelFullScreen) {
  45.       document.mozCancelFullScreen();
  46.     }
  47.     else if (document.webkitCancelFullScreen) {
  48.       document.webkitCancelFullScreen();
  49.     }
  50.          } else {
  51.                     //W3C
  52.                 if(docElm.requestFullscreen){
  53.                         docElm.requestFullscreen();
  54.                 }
  55.                 //FireFox
  56.                 else if(docElm.mozRequestFullScreen){
  57.                         docElm.mozRequestFullScreen();
  58.                 }
  59.                 //Chrome等
  60.                 else if(docElm.webkitRequestFullScreen){
  61.                         docElm.webkitRequestFullScreen();
  62.                 }
  63.                 //IE11
  64.                 else if(elem.msRequestFullscreen){
  65.                         elem.msRequestFullscreen();
  66.                 }
  67.          }
  68. }
复制代码



编辑于 2018-3-28 10:53  
分享扩散:
参与人数 +3 F豆 +95 理由
假扮纯黑 + 88 默默地点个赞,然后闪人
李复勇 + 1 默默地点个赞,然后闪人
铃兰の舞 + 6 老太太摔倒了我都不扶,就服你

查看全部评分

沙发
发表于 2018-3-28 13:03:41
楼主很是威武,虽然平台中有全屏不过需要点击两下,真是厉害了我的哥
板凳
发表于 2018-3-28 14:11:33
地板
发表于 2018-3-29 08:09:36
5楼
发表于 2018-3-29 09:27:32
6楼
发表于 2018-3-29 13:04:55
666啊
7楼
发表于 2018-3-29 18:01:22
秋云妹子有同款,JS实现全屏预览效果-http://help.finereport.com/doc-view-1788.html
8楼
发表于 2021-5-7 11:08:36
谢谢大佬
9楼
发表于 2021-7-5 10:34:19
有没有不用点击,打开就全屏的方法啊。试了半天,实现不了
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

8回帖数 2关注人数 8892浏览人数
最后回复于:2024-8-28 11:10

返回顶部 返回列表