前端实现页面全屏效果_前端全屏

前端实现页面全屏效果

代码写的比较烂，大哥们别骂我

//全屏按钮
function fullScreen() {
   var width = window.screen.width;
   var height = window.screen.height;
   //vue获取元素并给元素赋值
   var video = this.$refs.backVideo; //vue用ref获取元素
   video.style.width = width
   video.style.height = height // 在进入全屏时改变Dom的宽高
   //jq获取元素并给元素赋值
   var video = $('#backVideo')[0];
   $("#backVideo").css({ //在进入全屏时改变Dom的宽高
     'width': width,
     'height': height
   });

   //调用开启全屏方法
   launchFullscreen(video);

}

//点击开启全屏
function launchFullscreen(element) {
   //此方法不可以在異步任務中執行，否則火狐無法全屏
   if(element.RequestFullScreen) {//element.requestFullscreen（）方法用于发出异步请求使元素进入全屏模式，可查阅MDN web文档
      element.RequestFullScreen();
   } else if (element.requestFullscreen) {
       element.requestFullscreen();
    } else if(element.mozRequestFullScreen) {
      element.mozRequestFullScreen();
   } else if(element.msRequestFullscreen) {
      element.msRequestFullscreen();
   } else if(element.oRequestFullscreen) {
      element.oRequestFullscreen();
   } else if(element.webkitRequestFullscreen) {
      element.webkitRequestFullScreen();
   } else {
      var docHtml = document.documentElement;
      var docBody = document.body;
      var videobox = document.getElementById('videobox');
      var width = window.screen.width;
      var height = window.screen.height;
      var cssText = "width:" + width + ";height:" + height + ";overflow:hidden;";
      docHtml.style.cssText = cssText;
      docBody.style.cssText = cssText;
      document.IsFullScreen = true;
   }
}
//点击退出全屏
function exitFull() {
   var video = $('#backVideo')[0];
   $("#backVideo").css({
      'width': videoStyle.width,//在点击进入全屏前需记录原先的宽高，这里赋值后再退出全屏
      'height': videoStyle.height
   });

  //调用退出全屏方法
   exitFullscreen();
}

//退出全屏
function exitFullscreen() {
   if(document.exitFullscreen) {
      document.exitFullscreen();
   } else if(document.msExitFullscreen) {
      document.msExitFullscreen();
   } else if(document.mozCancelFullScreen) {
      document.mozCancelFullScreen();
   } else if(document.oRequestFullscreen) {
      document.oCancelFullScreen();
   } else if(document.webkitExitFullscreen) {
      document.webkitExitFullscreen();
   } else {
      var docHtml = document.documentElement;
      var docBody = document.body;
      var videobox = document.getElementById('videobox');
      docHtml.style.cssText = "";
      docBody.style.cssText = "";
      videobox.style.cssText = "";
      document.IsFullScreen = false;
   }

}


//判断是否处于全屏状态
function checkFull() {
   var isFull =  document.fullscreenEnabled || window.fullScreen || document.webkitIsFullScreen || document.msFullscreenEnabled;
   if(isFull === undefined) isFull = false;
   return isFull;
}
window.onresize = function(){
   if(!vm.checkFull()){
      vm.exitFull();//要执行的函数
   }

}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97