未激活(承诺) TypeError:文档非活动

Question

我有一个按钮，允许您在全屏模式下打开窗口。还有一只虫子。如果您单击按钮并打开窗口的全屏模式.然后按ESC按钮退出全屏模式，然后再按下该按钮，就会发生这样的错误。

未激活(承诺) TypeError:文档非活动

在FullScreenService.closeFullscreen

有办法纠正这个错误吗？

isOpenFullScreen: boolean;

fullscreen() {
  if (!this.isOpenFullScreen) {
    this._fullscreen.openFullscreen();
    this.isOpenFullScreen = true;
  } else {
    this._fullscreen.closeFullscreen();
    this.isOpenFullScreen = false;
  }
}

Answer 1

问题是，当您按ESC按钮时，属性isOpenFullScreen不会更改为false。尝试使用document.fullscreenElement并按以下方式更改您的fullscreen方法。

// isOpenFullScreen: boolean; // not needed

fullscreen() {
  if (document.fullscreenElement === null) {
    this._fullscreen.openFullscreen();
  } else {
    this._fullscreen.closeFullscreen();
  }
}

也许最好向您的服务中添加一个方法，以指示您当前是否处于全屏模式。

Answer 2

我就这样解决了：

if (document.fullscreenElement) {
    setTimeout(() => document.exitFullscreen(), 1000);
}

有趣的是，在500‘s上，仍然抛出错误，看起来在新的浏览器版本中做了一些更改，仅仅将其设置为500’s是不够的。

Answer 3

Angular 13

我就是这样做的

 export class YourComponent implements OnInit {  
 
   elem: any; 
   isFullScreen: boolean;
 
   constructor(
     @Inject(DOCUMENT) private document: any
   )
 
  ngOnInit(): void {
     this.chkScreenMode();
     this.elem = document.documentElement;
     this.elem.addEventListener('fullscreenchange',()=>this.chkScreenMode())
   }
 
  chkScreenMode(){
     if(document.fullscreenElement){
       //fullscreen
       this.isFullScreen = true;
     }else{
       //not in full screen
       this.isFullScreen = false;
     }
   }
 
 
   openFullscreen() {
     this.isFullScreen = true;
     if (this.elem.requestFullscreen) {
       this.elem.requestFullscreen();
     } else if (this.elem.mozRequestFullScreen) {
       /* Firefox */
       this.elem.mozRequestFullScreen();
     } else if (this.elem.webkitRequestFullscreen) {
       /* Chrome, Safari and Opera */
       this.elem.webkitRequestFullscreen();
     } else if (this.elem.msRequestFullscreen) {
       /* IE/Edge */
       this.elem.msRequestFullscreen();
     }
     //this.chkScreenMode()
   }
 /* Close fullscreen */
   closeFullscreen() {
     this.isFullScreen = false;
     if (this.document.exitFullscreen) {
       this.document.exitFullscreen();
     } else if (this.document.mozCancelFullScreen) {
       /* Firefox */
       this.document.mozCancelFullScreen();
     } else if (this.document.webkitExitFullscreen) {
       /* Chrome, Safari and Opera */
       this.document.webkitExitFullscreen();
     } else if (this.document.msExitFullscreen) {
       /* IE/Edge */
       this.document.msExitFullscreen();
     }        
   }
 }