深度优先

这个家伙好懒，除了文章什么都没留下

0%

【Angular】如何使用HTML5 Fullscreen API？

发表于 分类于
本文字数： 4.2k 阅读时长 ≈ 4 分钟

我使用Angular 7，我希望有一个按钮，可以将我的应用程序全屏显示。 我使用HTML5 Fullscreen API，我有两个功能：

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
openfullscreen() {
   // Trigger fullscreen
   console.log('gg');
   if (document.documentElement.requestFullscreen) {
     document.documentElement.requestFullscreen();
   } else if (document.documentElement.mozRequestFullScreen) { /* Firefox */
     document.documentElement.mozRequestFullScreen();
   } else if (document.documentElement.webkitRequestFullscreen) { /* Chrome, Safari and Opera */
     document.documentElement.webkitRequestFullscreen();
   } else if (document.documentElement.msRequestFullscreen) { /* IE/Edge */
     document.documentElement.msRequestFullscreen();
   }
   this.isfullscreen = true;
 }

 closefullscreen(){
   if (document.exitFullscreen) {
     document.exitFullscreen();
   } else if (document.mozCancelFullScreen) { /* Firefox */
     document.mozCancelFullScreen();
   } else if (document.webkitExitFullscreen) { /* Chrome, Safari and Opera */
     document.webkitExitFullscreen();
   } else if (document.msExitFullscreen) { /* IE/Edge */
     document.msExitFullscreen();
   }
   this.isfullscreen = false;
 }

它能工作，但会报很多错误警告：

1
2
3
4
5
6
7
8
9
10
11
12
error TS2339: Property 'mozRequestFullScreen' does not exist on type 'HTMLElement'.
error TS2339: Property 'mozRequestFullScreen' does not exist on type 'HTMLElement'.
error TS2339: Property 'webkitRequestFullscreen' does not exist on type 'HTMLElement'.
error TS2339: Property 'webkitRequestFullscreen' does not exist on type 'HTMLElement'.
error TS2551: Property 'msRequestFullscreen' does not exist on type 'HTMLElement'. Did you mean 'requestFullscreen'?
error TS2551: Property 'msRequestFullscreen' does not exist on type 'HTMLElement'. Did you mean 'requestFullscreen'?
error TS2339: Property 'mozCancelFullScreen' does not exist on type 'Document'.
error TS2339: Property 'mozCancelFullScreen' does not exist on type 'Document'.
error TS2339: Property 'webkitExitFullscreen' does not exist on type 'Document'.
error TS2339: Property 'webkitExitFullscreen' does not exist on type 'Document'.
error TS2551: Property 'msExitFullscreen' does not exist on type 'Document'. Did you mean 'exitFullscreen'?
error TS2551: Property 'msExitFullscreen' does not exist on type 'Document'. Did you mean 'exitFullscreen'?

改进方法：

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
openfullscreen() {
  // Trigger fullscreen
  const docElmWithBrowsersFullScreenFunctions = document.documentElement as HTMLElement & {
    mozRequestFullScreen(): Promise<void>;
    webkitRequestFullscreen(): Promise<void>;
    msRequestFullscreen(): Promise<void>;
  };

  if (docElmWithBrowsersFullScreenFunctions.requestFullscreen) {
    docElmWithBrowsersFullScreenFunctions.requestFullscreen();
  } else if (docElmWithBrowsersFullScreenFunctions.mozRequestFullScreen) { /* Firefox */
    docElmWithBrowsersFullScreenFunctions.mozRequestFullScreen();
  } else if (docElmWithBrowsersFullScreenFunctions.webkitRequestFullscreen) { /* Chrome, Safari and Opera */
    docElmWithBrowsersFullScreenFunctions.webkitRequestFullscreen();
  } else if (docElmWithBrowsersFullScreenFunctions.msRequestFullscreen) { /* IE/Edge */
    docElmWithBrowsersFullScreenFunctions.msRequestFullscreen();
  }
  this.isfullscreen = true;
}

closefullscreen(){
  const docWithBrowsersExitFunctions = document as Document & {
    mozCancelFullScreen(): Promise<void>;
    webkitExitFullscreen(): Promise<void>;
    msExitFullscreen(): Promise<void>;
  };
  if (docWithBrowsersExitFunctions.exitFullscreen) {
    docWithBrowsersExitFunctions.exitFullscreen();
  } else if (docWithBrowsersExitFunctions.mozCancelFullScreen) { /* Firefox */
    docWithBrowsersExitFunctions.mozCancelFullScreen();
  } else if (docWithBrowsersExitFunctions.webkitExitFullscreen) { /* Chrome, Safari and Opera */
    docWithBrowsersExitFunctions.webkitExitFullscreen();
  } else if (docWithBrowsersExitFunctions.msExitFullscreen) { /* IE/Edge */
    docWithBrowsersExitFunctions.msExitFullscreen();
  }
  this.isfullscreen = false;
}

翻译自：https://stackoverflow.com/questions/54242775/angular-7-how-does-work-the-html5-fullscreen-api-ive-a-lot-of-errors