js 实现页面全屏功能并监听屏幕变化requestFullscreen

本文主要是介绍js 实现页面全屏功能并监听屏幕变化requestFullscreen，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

代码如果对大家有帮助，大家记得点赞+评论！！！

js 中提供有相应的全屏/退出全屏方法，requestFullscreen() 全屏，exitFullscreen() 退出全屏

- fullscreenElement，只读属性 Document.fullscreenElement 返回当前页面中以全屏模式呈现的Element，如果当前页面未使用全屏模式，则返回 null。尽管这个属性是只读的，但如果修改它，即使在严格模式下也不会抛出错误；它的 setter 方法是空操作将被忽略。- requestFullscreen，是一个方法，可以让你的网页或者视频在浏览器全屏显示。这个方法可以应用于任何DOM元素，但最常见的是应用于video元素。注意：requestFullscreen()方法将请求进入全屏模式，但是它不会自动进入全屏模式，它需要用户的明确同意。如果用户同意了，浏览器会进入全屏模式，并且此时可以通过document.fullscreenElement属性获取当前处于全屏模式的元素。- exitFullscreen，方法请求将当前在全屏模式下呈现的文档元素退出全屏模式，恢复屏幕的先前状态。这通常会逆转先前调用Element.requestFullscreen() 的效果。

js 实现页面全屏功能

//全屏
const toFullScreen =()=> {// DOM对象的一个属性，会判断当前是否是全屏const fullscreenModule = document.querySelector('.testFull');let full = document.fullscreenElement;if (!full) {// 实现全屏模式fullscreenModule.requestFullscreen();} else {// 变为不是全屏模式->退出全屏模式document.exitFullscreen();}
}

 //退出全屏
const exitFullScreen =()=> {let full = document.fullscreenElement;//判断是否全屏，如果当前是全屏状态，则退出全屏if (full) {document.exitFullscreen();}}

js 实现监听屏幕变化

//监听屏幕变化事件window.addEventListener('fullscreenchange', function() {//document.fullscreenElement//存在，代表当前页面处理全屏状态//不存在，代表当前页面已经退出全屏状态if (!document.fullscreenElement) {// 执行退出全屏后的操作}
});//销毁监听事件
window.removeEventListener('fullscreenchange', function() {});