概述
前端工作中,特别是大屏展示需要全屏展示,如果用户不想手动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相应,用于捕获全屏模式进入和退出的错误异常情况。
