Angular 2/4上的FullScreen请求

发布时间：2020-12-17 17:24:01 所属栏目：安全来源：网络整理

导读：我正在Angular 2 / Angular 4上构建一个新项目,我需要在我的应用程序上使用Enter FullScreen Button. 我正在搜索,我找到了代码： toggleFullScreen() { if (!document.fullscreenElement // alternative standard method !document.mozFullScreenElement !do

我正在Angular 2 / Angular 4上构建一个新项目,我需要在我的应用程序上使用Enter FullScreen Button.

我正在搜索,我找到了代码：

toggleFullScreen() {
    if (!document.fullscreenElement &&    // alternative standard method
        !document.mozFullScreenElement && !document.webkitFullscreenElement && !document.msFullscreenElement )
        {  // current working methods
      if (document.documentElement.requestFullscreen) {
        document.documentElement.requestFullscreen();
      } else if (document.documentElement.msRequestFullscreen) {
        document.documentElement.msRequestFullscreen();
      } else if (document.documentElement.mozRequestFullScreen) {
        document.documentElement.mozRequestFullScreen();
      } else if (document.documentElement.webkitRequestFullscreen) {
        document.documentElement.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
      }
    } else {
      if (document.exitFullscreen) {
        document.exitFullscreen();
      } else if (document.msExitFullscreen) {
        document.msExitFullscreen();
      } else if (document.mozCancelFullScreen) {
        document.mozCancelFullScreen();
      } else if (document.webkitExitFullscreen) {
        document.webkitExitFullscreen();
      }
    }
  }

当我使用“ng serve”编译应用程序时,FullScreen Button工作,但它给了我以下错误：

06001

有人可以帮助我,请？

解决方法

HTMLElement和Element的类型没有定义像mozFullScreenElement和ALLOW_KEYBOARD_INPUT这样的属性,所以即使生成的JavaScript代码工作正常,TypeScript编译器也不满意.

快速和肮脏的解决方案是将所有麻烦转移到< any>.更复杂的方法是定义自己的扩展HTMLElement和Element的接口,如下所示：

interface MyHTMLElement extends HTMLElement {
  mozFullScreenElement?: boolean;
  webkitFullscreenElement?: boolean;
  // ...etc...
}

…并将这些元素对象转换为< any>.

编辑：我想自己使用这个全屏代码,所以我发布了一个完整的TypeScript友好版本：

interface FsDocument extends HTMLDocument {
  mozFullScreenElement?: Element;
  msFullscreenElement?: Element;
  msExitFullscreen?: () => void;
  mozCancelFullScreen?: () => void;
}

export function isFullScreen(): boolean {
  const fsDoc = <FsDocument> document;

  return !!(fsDoc.fullscreenElement || fsDoc.mozFullScreenElement || fsDoc.webkitFullscreenElement || fsDoc.msFullscreenElement);
}

interface FsDocumentElement extends HTMLElement {
  msRequestFullscreen?: () => void;
  mozRequestFullScreen?: () => void;
}

export function toggleFullScreen(): void {
  const fsDoc = <FsDocument> document;

  if (!isFullScreen()) {
    const fsDocElem = <FsDocumentElement> document.documentElement;

    if (fsDocElem.requestFullscreen)
      fsDocElem.requestFullscreen();
    else if (fsDocElem.msRequestFullscreen)
      fsDocElem.msRequestFullscreen();
    else if (fsDocElem.mozRequestFullScreen)
      fsDocElem.mozRequestFullScreen();
    else if (fsDocElem.webkitRequestFullscreen)
      fsDocElem.webkitRequestFullscreen();
  }
  else if (fsDoc.exitFullscreen)
    fsDoc.exitFullscreen();
  else if (fsDoc.msExitFullscreen)
    fsDoc.msExitFullscreen();
  else if (fsDoc.mozCancelFullScreen)
    fsDoc.mozCancelFullScreen();
  else if (fsDoc.webkitExitFullscreen)
    fsDoc.webkitExitFullscreen();
}

export function setFullScreen(full: boolean): void {
  if (full !== isFullScreen())
    toggleFullScreen();
}

到目前为止,我已经在Chrome,Firefox和Safari中运行了这一切,所有这些都在macOS上运行,而且效果很好.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!