javascript - 添加 (@host) 监听器以进行全屏更改

Question

我想使用 HTML5 fullscreen API 检测是否启用了全屏模式。我正在使用 Chrome 和 Angular 4.x。

我创建了一个 Angular 组件并添加了以下 @HostListener:

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

由于某些原因，这不起作用。我试过删除浏览器前缀，捕获其他事件，如 webkitFullscreenEnabled，但所有这些都没有帮助。

有什么建议吗？谢谢。

Answer 1

您需要为应用程序将要运行的浏览器/browserkit 处理 fullscreenchange 事件，根据我见过的大多数指南，有四个。我就是这样做的(我是 Angular 新手，所以可能有更好/更简洁的方法)，

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

它会检测我尝试过的每个浏览器的变化(OSX 上的桌面浏览器和 Android 上的移动浏览器)。