当前位置: 首页 > news >正文

HTML页面的全屏显示及退出全屏案例

  • 进入全屏
    requestFullscreen 接收一个参数 options(可选), options 是一个对象, 但是只有一个字段 navigationUI, 用于控制是否在元素处于全屏模式时显示导航条.
    可选值为 auto, hide, show, 默认值为 auto;当元素不在文档内时, 调用requestFullScreen回失败。

  • 退出全屏
    exitFullscreen方法,退出全屏只需要调用 document 对象的 exitFullscreen。 调用这个方法会让文档回退到上一个调用Element.requestFullscreen()方法进入全屏模式之前的状态.
    例如, 上面示例中, 先使整个页面进入全屏, 再点击部分全屏的按钮使 section-full-container 进入全屏. 那么整个时候调用 document.exitFullScreen() 时, 会返回整个页面全屏的状态, 需要再次调用 document.exitFullScreen() 才能完全退出全屏状态

代码案例:

<h3 id="fsb">全屏展示</h3><script>     const html = document.querySelector('html');const fullScreenBtn = document.getElementById('fsb');fullScreenBtn.onclick = () => {// 获取是否全屏状态let full = document.fullscreenElementif (!full) {console.log('全屏');fullScreenBtn.innerText = "退出全屏"// 实现全屏模式document.documentElement.requestFullscreen()} else {console.log('退出');fullScreenBtn.innerText = "全屏展示"// 变为不是全屏模式->退出全屏模式document.exitFullscreen()}} </script>

本文参考于:https://blog.csdn.net/m0_67401746/article/details/123501814

http://www.lryc.cn/news/232086.html

相关文章:

  • layui弹出层点回车键无限弹出解决
  • 抖音测试付费短视频:从短剧领域拓展到知识、娱乐全品类
  • 代码随想录算法训练营第五十五天 | LeetCode 583. 两个字符串的删除操作、72. 编辑距离、编辑距离总结
  • Excel vlookup 如何使用
  • Latex常用特殊字符汇总
  • Day1跟李沐学AI-深度学习课程00-04【预告、课程安排、深度学习介绍、安装、数据操作+数据预处理】
  • 借助拧紧曲线高效管理螺栓装配防错——SunTorque智能扭矩系统
  • 李开复再度回应争议;10 月中国游戏厂商及应用出海收入 30 强出炉丨 RTE 开发者日报 Vol.86
  • mysql undolog
  • milvus数据库-管理数据库
  • 一键整合,万用万灵,Python3.10项目嵌入式一键整合包的制作(Embed)
  • MAC地址注册的网络安全影响和措施分析
  • 某个订单项目记录,涉及MQ消息处理、分布式问题、幂等性等问题解决设计
  • excel中的OFFSET函数
  • 力扣:168. Excel表列名称(Python3)
  • 短视频账号矩阵系统源码/技术源码分享/技术搭建架构
  • Nginx负载均衡时,验证码老是错误
  • Unity3D ugui获取ui控件屏幕坐标
  • 数字化转型的“支点”是什么?
  • Spring Task单机定时任务(使用及阻塞问题解决)
  • 石原子科技亮相2023成都市信息领域新产品发布会
  • 2023数维杯国际赛数学建模竞赛选题建议及D题思路讲解
  • 最新宝塔反代openai官方API开发接口详细搭建教程,解决502 Bad Gateway问题
  • vue3 实现pdf预览
  • 【React】Redux基本使用
  • Banana Pi BPI-W3之RK3588安装Qt+opencv+采集摄像头画面.
  • OCR转换技巧:如何避免图片转Word时出现多余的换行?
  • 抖音小店怎么对接达人?如何避免达人白嫖样品?实操经验分享!
  • Xocde 升级15 或者 iOS17报错:
  • Apache配置ssl证书-实现https访问