>

HTML5 fullscreen API 를 사용하여 풀 모드가 활성화되어 있는지 감지하고 싶습니다 . Chrome 를 사용하고 있습니다  그리고 Angular 4.x .

앵귤러 컴포넌트를 만들었고 다음 @HostListener 를 추가했습니다. :

@HostListener('document:webkitfullscreenchange', [$event])
FSHandler(event: KeyboardEvent) {
  console.log('fullscreen mode changed...');
}

어떤 이유로 작동하지 않습니다. webkitFullscreenEnabled 와 같은 다른 이벤트를 캡처하여 브라우저 접두사를 제거하려고했습니다. 하지만 도움이되지 않았습니다.

제안은? 감사합니다.


  • 답변 # 1

    순수 자바 스크립트로 할 수있었습니다

    this.document.addEventListener('webkitfullscreenchange', () => {
      console.log('fullscreen mode changed...');
    })
    
    

    같은 일도 할 수 있습니다

    document.onfullscreenchange = () => console.log('fullscreenchange event fired!');
    
    

    마지막 예제에서이 줄이있는 곳에 여러 객체를 얻는 경우 문서는 싱글 톤이라는 것을 잊지 마십시오. 그러니 조심하십시오. 개인적으로 내부에서 변수를 수정 한 함수에 있지만 콜백을 포함하는 객체의 여러 인스턴스가 존재하므로 동일한 문서를 덮어 썼습니다.

    그러나 당신이 그것을 원한다면 Angular 방식으로하십시오. 당신은 올바른 접근 방식을 가지고 있습니다. 동일한 코드를 가지고 있지만 이벤트는 'any'입니다. 이벤트가 KeyboardEvent 유형이라고 생각하지 않습니다. 문제 일 수도 있습니다.

  • 답변 # 2

    fullscreenchange 를 처리해야합니다.  앱이 표시 될 브라우저/브라우저 킷 이벤트이며, 내가 본 대부분의 가이드에는 4 가지가 있습니다. 이것이 내가 한 방법입니다 (나는 Angular 초보자이므로 더 좋고 깨끗한 방법이있을 수 있습니다),

    @HostListener('fullscreenchange', ['$event'])
    @HostListener('webkitfullscreenchange', ['$event'])
    @HostListener('mozfullscreenchange', ['$event'])
    @HostListener('MSFullscreenChange', ['$event'])
    screenChange(event) {
      console.log(event);
    }
    
    

    이것은 내가 시도한 모든 브라우저 (OSX의 데스크톱 및 Android의 모바일 브라우저)의 변화를 감지합니다.

  • 이전 python - QTreeWidget 첫 번째 항목을 선택하십시오
  • 다음 android - NestedScrollView setOnScrollChangeListener API 21