添加(@host)侦听器以进行全屏更改

问题描述 投票:0回答:2

我想通过使用HTML5 fullscreen API检测是否启用了fullsceen模式。我正在使用ChromeAngular 4.x

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

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

由于某种原因,这不起作用。我已经尝试删除浏览器前缀,捕获其他事件,如webkitFullscreenEnabled,但所有这些都无济于事。

有什么建议?谢谢。

javascript angularjs html5 fullscreen addeventlistener
2个回答
0
投票

我能够在纯JavaScript中完成它

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

你也可以这样做

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

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

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


0
投票

你需要处理应用程序所在的Browser / browserkit的fullscreenchange事件,从我见过的大多数指南中,有四个。这就是我做的方式(我是一个Angular新手,所以可能有一个更好/更清洁的方式),

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

这可以检测到我尝试的每个浏览器的变化(OSX上的桌面浏览器和Android上的移动设备)。

© www.soinside.com 2019 - 2024. All rights reserved.