Angular 7 - HTML5全屏API是如何工作的？我遇到了很多错误。

Question

我使用Angular 7，希望能有一个按钮将我的应用程序全屏。我使用HTML5全屏API，并编写了两个函数：

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;
  }

起初它是可以工作的，但是我遇到了许多错误：

错误 TS2339：类型“HTMLElement”上不存在属性“mozRequestFullScreen”。

错误 TS2339：类型“HTMLElement”上不存在属性“mozRequestFullScreen”。

错误 TS2339：类型“HTMLElement”上不存在属性“webkitRequestFullscreen”。

错误 TS2339：类型“HTMLElement”上不存在属性“webkitRequestFullscreen”。

错误 TS2551：类型“HTMLElement”上不存在属性“msRequestFullscreen”。是否指的是“requestFullscreen”？

错误 TS2551：类型“HTMLElement”上不存在属性“msRequestFullscreen”。是否指的是“requestFullscreen”？

错误 TS2339：类型“Document”上不存在属性“mozCancelFullScreen”。

错误 TS2339：类型“Document”上不存在属性“mozCancelFullScreen”。

错误 TS2339：类型“Document”上不存在属性“webkitExitFullscreen”。

错误 TS2339：类型“Document”上不存在属性“webkitExitFullscreen”。

错误 TS2551：类型“Document”上不存在属性“msExitFullscreen”。是否指的是“exitFullscreen”？

错误 TS2551：类型“Document”上不存在属性“msExitFullscreen”。是否指的是“exitFullscreen”？

当我重新启动我的代码时，我仍然会遇到相同的错误，但另外还有这个：

Failed to compile.

我的应用程序无法运行。我如何在没有错误的情况下进行编译？

- Jérémy Gachon

---

Angular文档类型不提供这些方法或属性。您需要编写一个提供它们的类型扩展，或者可能只需使用像screenfull.js这样的库为您完成所有这些垃圾工作。不要重复造轮子。 - bryan60

谢谢，但这可以使用HTML5 API工作，问题只是Angular CLI看到了一个错误，这个工作，但是Angular CLI停止编译。 - Jérémy Gachon

可能是Angular 2/4上的全屏请求的重复问题。 - abd995

请再阅读一次我所说的话。问题在于类型。被接受的答案正是我所说的，它扩展了类型。 - bryan60

好的。对不起，我没有理解你在谈论screenfull.js。抱歉。 - Jérémy Gachon

https://dev59.com/FF8e5IYBdhLWcg3wLYHt#25994697 - Amirhossein Mehrvarzi

Answer 1

你可以使用"as"关键字来转换document和document.documentElement的接口类型，以告诉typescript你将要使用哪些方法。例如：

const docElmWithBrowsersFullScreenFunctions = document.documentElement as HTMLElement & {
  mozRequestFullScreen(): Promise<void>;
  webkitRequestFullscreen(): Promise<void>;
  msRequestFullscreen(): Promise<void>;
};

const docWithBrowsersExitFunctions = document as Document & {
  mozCancelFullScreen(): Promise<void>;
  webkitExitFullscreen(): Promise<void>;
  msExitFullscreen(): Promise<void>;
};

请注意，这只是防止编译错误，你仍然应该像之前一样检查这些方法是否存在。

因此，你的方法应该像这样：

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;
}

- Vahid

---

@JérémyChamboultou 我更新了我的回答。我没有测试过，请告诉我是否有效。 - Vahid

Answer 2

定义类型：

type ExitFullscreen = typeof document.exitFullscreen
type RequestFullscreen = typeof document.documentElement.requestFullscreen

declare global {
  interface Document {
    webkitExitFullscreen: ExitFullscreen;
    mozCancelFullScreen: ExitFullscreen;
    msExitFullscreen: ExitFullscreen;
  }

  interface HTMLElement {
    webkitRequestFullscreen: RequestFullscreen;
    mozRequestFullScreen: RequestFullscreen;
    msRequestFullscreen: RequestFullscreen;
  }
}

- Saber Hayati