概述
前端工作中,特别是大屏展示需要全屏展示,如果用户不想手动F11
让电脑屏幕全屏,那作为开发者如何实现呢?
相关 API 介绍
requestFullscreen
方法
其实 HTML5 为我们提供了requestFullscreen
方法,用于使一个元素进入全屏模式,这对于增强用户体验,如统计分析页面需要大屏展示时非常实用。
通常情况下,这个 API 需要在用户交互比(如点击按钮)后才能调用,否则浏览器会报错:Uncaught (in promise) TypeError: Permissions check failed
示例如下:
doms.container
.requestFullscreen()
.then(() => {
console.log("全屏了");
})
.catch((err) => {
console.log(err.message);
});
若不是在用户交互后才触发全屏,程序会走catch
,捕获错误;若成功,则执行then
的回调。
exitFullscreen
方法
exitFullscreen
方法用于退出全屏模式,通常通过document.exitFullscreen()
。
fullscreen
属性
document.fullscreen
属性返回当前是否是全屏模式。
fullscreenEnabled
属性
一般获取document.fullscreenEnabled
的值,用于判断当前浏览器是否支持全屏。
fullscreenElement
属性
document.fullscreenElement
属性返回当前全屏的元素或DOM
节点,如果不是全屏,则返回null
。
onfullscreenchange
方法
onfullscreenchange
方法可以用于监听进入全屏和退出全屏,其方法在requestFullscreen
或exitFullscreen
的then
后面执行。
onfullscreenerror
方法
onfullscreenerror
方法与onfullscreenchange
相应,用于捕获全屏模式进入和退出的错误异常情况。