HTML页面的全屏显示-Fullscreen API
使用 Fullscreen api 处理页面全屏
HTML 页面的全屏显示
使用 Element.requestFullscreen() 可以使元素进入全屏，该方法是异步方法，返回一个 Promise 对象
整个页面全屏显示
比如我们需要让整个网页全屏显示，只需要用 html 元素调用 requestFullscreen 方法即可。
示例代码：
<html><body><div>全屏显示案例<button id="full-screen-btn">进入全屏</button></div></body><script>const html = document.querySelector('html');const fullScreenBtn = document.getElementById('full-screen-btn');fullScreenBtn.onclick = () => {html.requestFullscreen().then(() => {console.log('进入全屏成功')；}).catch(() => {console.log('进入全屏失败')；})}</script>
<html>
参数
requestFullScreen 接收一个参数 options(可选), options 是一个对象, 但是只有一个字段 navigationUI, 用于控制是否在元素处于全屏模式时显示导航条.
可选值为 auto, hide, show, 默认值为 auto.
当元素不在文档内时, 调用requestFullScreen回失败
<html><body><div>全屏显示案例<button id="full-screen-btn">进入全屏</button></div></body><script>const html = document.querySelector('html');const fullScreenBtn = document.getElementById('full-screen-btn');fullScreenBtn.onclick = () => {html.requestFullscreen().then(() => {console.log('进入全屏成功')；}).catch(() => {console.log('进入全屏失败')；})}// 不在文档内的内容全屏const el = document.createElement('div');el.requestFullscreen().then(() => {console.log('全屏成功');}).catch(() => {console.log('全屏失败');});</script>
<html>
部分内容进入全屏状态
是部分内容进入全屏和页面全屏是一样的, 只是调用 requestFullScreen 方法的 dom 节点改为相应元素即可.
示例代码：
<html><header><style>div {padding: 20px;}#section-full-container {background-color: #409EFF;color: #fff;height: 200px;}</style></header><body><div>全屏显示案例<button id="full-screen-btn">进入全屏</button></div><div id="section-full-container">部分全屏<button id="section-full-screen-btn">进入全屏</button></div>
</body>
<script>const html = document.querySelector('html');const fullScreenBtn = document.getElementById('full-screen-btn');fullScreenBtn.onclick = () => {html.requestFullscreen().then(() => {console.log('进入全屏成功');}).catch(() => {console.log('进入全屏失败');})}// 部分内容全屏const sectionFullContainer = document.getElementById('section-full-container');const sectionFullBtn = document.getElementById('section-full-screen-btn');sectionFullBtn.onclick = () => {sectionFullContainer.requestFullscreen().then(() => {console.log('全屏成功');}).catch(() => {console.log('全屏失败');});}
</script>
</html>
退出全屏
退出全屏只需要调用 document 对象的 exitFullscreen. 调用这个方法会让文档回退到上一个调用Element.requestFullscreen()方法进入全屏模式之前的状态.
例如, 上面示例中, 先使整个页面进入全屏, 再点击部分全屏的按钮使 section-full-container 进入全屏. 那么整个时候调用 document.exitFullScreen() 时, 会返回整个页面全屏的状态, 需要再次调用 document.exitFullScreen() 才能完全退出全屏状态
示例代码
<html><header><style>div {padding: 20px;}#section-full-container {background-color: #409EFF;color: #fff;height: 200px;}</style></header><body><div>全屏显示案例<button id="full-screen-btn">进入全屏</button><button id="exit-full-screen-btn">退出全屏</button></div><div id="section-full-container">部分全屏<button id="section-full-screen-btn">进入全屏</button><button id="section-exit-full-screen-btn">退出全屏</button></div>
</body>
<script>const html = document.querySelector('html');const fullScreenBtn = document.getElementById('full-screen-btn');fullScreenBtn.onclick = () => {html.requestFullscreen().then(() => {console.log('进入全屏成功');}).catch(() => {console.log('进入全屏失败');})}const sectionFullContainer = document.getElementById('section-full-container');const sectionFullBtn = document.getElementById('section-full-screen-btn');sectionFullBtn.onclick = () => {sectionFullContainer.requestFullscreen().then(() => {console.log('全屏成功');}).catch(() => {console.log('全屏失败');});}// 退出全屏const exitFullScreenBtn = document.getElementById('exit-full-screen-btn');const sectionExitFullScreenBtn = document.getElementById('section-exit-full-screen-btn');exitFullScreenBtn.onclick = () => {exitFullScreen();}sectionExitFullScreenBtn.onclick = () => {exitFullScreen();}
</script>
</html>
注意该方法是 document 对象的而不是对应元素的
事件与属性
当全屏状态改变时, 对应元素会触发 fullscreenchange 事件, 该事件会冒泡, 实际使用可以统一监听 document 对象的 fullscreenchange 事件.
document.fullScreenElement 属性可以访问当前正在全屏的元素节点. 没有页面全屏是返回 null.
示例代码
<html><header><style>div {padding: 20px;}#section-full-container {background-color: #409EFF;color: #fff;height: 200px;}</style></header><body><div>全屏显示案例<button id="full-screen-btn">进入全屏</button><button id="exit-full-screen-btn">退出全屏</button></div><div id="section-full-container">部分全屏<button id="section-full-screen-btn">进入全屏</button><button id="section-exit-full-screen-btn">退出全屏</button></div>
</body>
<script>const html = document.querySelector('html');const fullScreenBtn = document.getElementById('full-screen-btn');fullScreenBtn.onclick = () => {html.requestFullscreen().then(() => {console.log('进入全屏成功');}).catch(() => {console.log('进入全屏失败');})}const sectionFullContainer = document.getElementById('section-full-container');const sectionFullBtn = document.getElementById('section-full-screen-btn');sectionFullBtn.onclick = () => {sectionFullContainer.requestFullscreen().then(() => {console.log('全屏成功');}).catch(() => {console.log('全屏失败');});}const exitFullScreenBtn = document.getElementById('exit-full-screen-btn');const sectionExitFullScreenBtn = document.getElementById('section-exit-full-screen-btn');exitFullScreenBtn.onclick = () => {exitFullScreen();}sectionExitFullScreenBtn.onclick = () => {exitFullScreen();}// 监听事件document.onfullscreenchange = () => {console.log('全屏状态变更');// 访问当前全屏的节点console.log('当前全屏节点为: ', document.fullscreenElement);}
</script>
</html>
元素的全屏样式
使用伪类 :fullscreen, 可以给元素设置全屏时的属性, 当页面没有进入全屏是不生效, 全屏后才生效.
是当前元素属于全屏元素的时候才生效, 既当前元素为 document.fullScreenElement.
如果是父级或父级以上元素全屏, 该元素的 :fullscreen 样式并不会生效
注意: 该方法属于实验性方法, 有兼容性问题, 不建议实际项目中使用
示例代码
<html><head><style>#container {background-color: #409EFF;color: #fff;height: 200;}/* 进入全屏是使元素变为绿色 */#container:fullscreen {background-color: #67C23A;}</style></head><body><div id="container">fullscreen 伪类案例<button id="full-screen-btn">进入全屏</button></div></body><script>const container = document.getElementById('container');const fullScreenBtn = document.getElementById('full-screen-btn');fullScreenBtn.onclick = () => {container.requestFullscreen();}</script>
<html>
解决兼容性问题
兼容性问题可以参考 MDN 相关说明, 实际使用中可以使用 fullscreen 包进行全屏显示处理.
HTML页面的全屏显示-Fullscreen API相关推荐
- JS实现新打开网页最大化or全屏显示
2019独角兽企业重金招聘Python工程师标准>>> 一个新的小功能,用户希望打开的页面可以全屏显示~唔~不是实现F11那种效果,只是填满任务栏上方的屏幕~ <script ...
- Qt for Android 动态全屏显示
文章目录 前言 正文 实现全屏显示原理方法 Qt 实现的全屏和非全屏android代码 总结 前言 最近使用Qt开发安卓有这样一个需求,某一个页面可能需要全屏显示,也就是所谓的沉倾式显示,任务栏等都见 ...
- Fullscreen API 全屏显示网页
Fullscreen API 全屏显示网页 第一次看到应用 Fullscreen API 全屏显示网页,是 FaceBook 中的照片放大.作为一个比较新的 API,目前只有 Safari.Chrom ...
- 使用JAVASCRIPT进行全屏显示页面，就像触摸屏显示效果
使用JAVASCRIPT进行全屏显示页面,就像触摸屏显示效果 <script type="text/javascript"> window.onload ...
- JSP网页全屏显示、退出全屏、关闭页面
[转]JSP网页全屏显示.退出全屏.关闭页面 jsp相关知识 2009-06-07 20:36:42 阅读108 评论0 字号:大中小 订阅 全屏显示 ---------------------- ...
- js 全屏显示和关闭页面
js使ie全屏显示(转) 文章分类:Web前端 第一种: 在已经打开的一个普通网页上,点击"全屏显示",然后进入该网页对应的全屏模式.方法为:在网页的<body>与&l ...
- 关于全屏显示，浏览器全屏、窗口/页面全屏
1.浏览器全屏 (1)全屏显示 var docElm = document.documentElement; //W3C if (docElm.requestFullscreen) { docElm. ...
- uniapp APP项目启动页面全屏显示去除导航栏和下巴
uniapp APP项目启动页面全屏显示去除导航栏和下巴 <template><view><!-- 启动图 --><view class="star ...
- 微信小程序页面添加背景图，图片全屏显示
前言 微信的wxss里面不允许使用使用 background: url(),只能另外找方法进行背景图片显示. 方法 1.wxss页面里面设置页面的全屏宽高,以及view添加宽高 page{height ...
- h5页面实现浏览器全屏显示
目录 开启全屏显示 退出全屏显示 获取当前是否全屏状态 开启全屏显示 let el = document.documentElement; // 不同浏览器兼容方法调用 if(el.requestFu ...
最新文章
- Marvelous Designer衣袖设计教程
- 25万亿规模！中国智慧城市建设刚需在哪？
- C# 判断字符串是否符合十六进制，八进制，二进制和十进制整数格式的正则表达式...
- js怎么获取一个元素与屏幕右边的距离_js获取元素到屏幕左上角的距离
- 掌门教育微服务体系 Solar | 阿里巴巴 Nacos 企业级落地中篇
- 6000字思考！一篇看懂促销系统的底层逻辑
- .html追加的触发js事件,JavaScript
- html_5_小作业1_超链接练习
- Spring 由构造函数自动装配
- Cracked me --1--Acid_burn
- Spring框架----通用切入点表达式
- objective-c宏定义
- java 微信 图灵机器人_使用图灵api创建微信聊天机器人
- 双目摄像机测深度原理
- 怎么拆分PDF文件？分享两种拆分文件的方法
- 浙江2段线能上什么计算机学校,二段线考生看过来！这些浙江省内热门高校还有热门专业可捡漏...
- AI对项目管理的影响
- JAVA OOP继承和抽象
- 金蝶cloud 常用数据库表
- 零元投资，快速赚钱的好项目，美妆溪妍值得你选择