js指定元素全屏并监听退出全屏

JavaScript015

js指定元素全屏并监听退出全屏,第1张

1.全屏实现

2.监听esc取消全屏

从网上也看到了能够实现退出全屏的方法，但是我chrome和firefox上尝试了一下，并没有看到能退出全屏的效果。如果有哪位大佬证实能够实现退出全屏的方法，麻烦告诉我一下，我再进行改正。

最后感谢各位看官老爷。

在 <template> 标签中主要是放一个全屏与退出全屏的按钮，并绑定上点击事件 fullScreenClick 。全屏与退出全屏的按钮显示切换是通过变量 fullScreen 控制的。

在js中，设置当前全屏状态的初始值为 false 。由于全屏状态下 ，按 "Esc" 键退出全屏，浏览器监听不到 "Esc" 键的事件，所以需要通过浏览器窗口大小改变的事件去触发退出全屏事件。（如果全屏是单一页面的功能，记得在组件销毁的时候清除掉 window 中 resize 事件的绑定）。

浏览器全屏实现方式

https://www.nhooo.com/jsref/elem_requestfullscreen.html

https://blog.csdn.net/weixin_33766168/article/details/91439341?spm=1001.2101.3001.6650.1&utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7ECTRLIST%7Edefault-1.no_search_link&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7ECTRLIST%7Edefault-1.no_search_link