欢迎来到尧图网

客户服务 关于我们

您的位置:首页 > 教育 > 高考 > HTML5 全屏API讲解

HTML5 全屏API讲解

2024/10/25 2:19:28 来源:https://blog.csdn.net/m0_46281382/article/details/141792134  浏览:    关键词:HTML5 全屏API讲解

概述

前端工作中,特别是大屏展示需要全屏展示,如果用户不想手动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方法可以用于监听进入全屏和退出全屏,其方法在requestFullscreenexitFullscreenthen后面执行。

onfullscreenerror 方法

onfullscreenerror方法与onfullscreenchange相应,用于捕获全屏模式进入和退出的错误异常情况。

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com