Question

我想通过使用HTML5 fullscreen API检测是否启用了fullsceen模式。我使用Chrome和Angular 4.x。

我已经创建了一个Angular组件并添加了@HostListener：

＆＃13;

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

＆＃13;

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

有什么建议吗？感谢。

Answer 1

我能够在纯粹的javascript中完成它

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

您也可以执行类似

的操作

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

虽然在最后一个例子中不要忘记，如果你得到多个具有此行的对象，则文档是单例。所以要注意。我个人在一个函数中修改了一个变量，但是包含该回调的对象的多个实例存在，所以同一个文档被覆盖了。

但是如果你想以Angular方式做到这一点。你得到了正确的方法。我确实有相同的代码，但我的事件是'any'类型。我不认为该事件是KeyboardEvent类型。那可能是你的问题。

Answer 2

您需要处理将要启动应用程序的Browser / Browserkit的fullscreenchange事件，在我所见过的大多数指南中，有四个。这就是我的做法（我是Angular新手，所以可能会有更好/更简洁的方法）

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

并且可以检测到我尝试过的每种浏览器（在OSX上为台式机，在Android上为移动版）的变化。

添加（@host）侦听器以进行全屏更改

2 个答案: