代码如果对大家有帮助,大家记得点赞+评论!!!
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() {});