全屏模式

简介: 全屏模式

iOS Safari 没有全屏 API,但 Chrome(Android 版)、Firefox 和 IE 11+ 上则有相应的 API。

打造全屏体验时需要在意的主要 JS API 如下:

  1. element.requestFullscreen():以全屏模式显示元素。
  2. document.exitFullscreen():取消全屏模式。
  3. document.fullscreenElement:如有任何元素处于全屏模式,返回 true。

应用进入全屏模式时,无法再使用浏览器的 UI 控件。 全屏模式下的浏览器没有前进和后退这样的标准导航控件,也没有刷新按钮可以显示。

<body>
  <div>hello world</div>
  <button id="goFS">全屏</button>
  <script>
    const goFS = document.getElementById("goFS");
    goFS.addEventListener("click", function () {
      document.body.requestFullscreen();
      // 为了兼容要写两套
      document.documentElement.requestFullscreen();
    }, false);
  </script>
</body>

让 video 元素进入全屏模式与让任何其他元素进入全屏模式的方法完全相同。 只需调用 video 元素上的 requestFullscreen 方法。

<body>
  <video id="videoElement"></video>
  <button id="goFS">全屏</button>
  <script>
    const goFS = document.getElementById("goFS");
    goFS.addEventListener("click", function () {
      const videoElement = document.getElementById("videoElement");
      videoElement.requestFullscreen();
    }, false);
  </script>
</body>

Element.requestFullscreen() 方法用于发出异步请求使元素进入全屏模式。

调用此API并不能保证元素一定能够进入全屏模式。如果元素被允许进入全屏幕模式,返回的Promise会resolve,并且该元素会收到一个fullscreenchange事件,通知它已经进入全屏模式。如果全屏请求被拒绝,返回的promise会变成rejected并且该元素会收到一个fullscreenerror事件。

相关文章
|
算法 开发者 微服务
编码之道:我的技术感悟之旅
在数字世界的迷宫中,每一次代码的敲击都是对未知的探索。本文旨在揭示编程实践背后的深层逻辑与哲学思考,从个人经历出发,探讨如何通过技术提升解决问题的能力,以及在不断学习与实践中获得的成长。文章将分享作者在面对复杂问题时的思维方式,以及如何将理论知识与实际项目相结合的经验。
119 27
|
4月前
|
存储 机器学习/深度学习 算法
|
数据安全/隐私保护
支付系统29-------支付宝支付-----支付成功异步通知---接收通知
支付系统29-------支付宝支付-----支付成功异步通知---接收通知
|
7月前
|
人工智能 安全 开发者
2025 年 WordPress 本地部署工具深度测评:3 大高效实践方案解析
随着 WordPress 6.4 的普及,本地开发工具向智能化、场景化发展。个人开发者追求零配置启动,企业团队需标准化方案。技术演进聚焦容器化整合、AI 辅助决策与边缘计算适配。深度测评中,WordPress Studio 适合快速原型开发,Websoft9 面板适用于企业级管理,Bulk Plugin Installer 提升批量部署效率。2025 年行业趋势显示容器化、AI 辅助及边缘计算支持成为主流,选型应结合项目规模与安全需求。
285 0
|
监控 负载均衡 分布式数据库
Region 的分裂和合并是如何影响 Region 性能的
Region 的分裂和合并是如何影响 Region 性能的
|
开发框架 .NET C#
C# 一分钟浅谈:第一个 C# 控制台应用程序
【9月更文挑战第1天】C# 是一种现代化的、面向对象的编程语言,广泛应用于桌面应用、Web 应用和游戏开发等领域。本文详细介绍如何创建第一个 C# 控制台应用程序,包括使用 Visual Studio 和 .NET SDK 的步骤,并解析常见问题及其解决方法,如控制台窗口立即关闭、编译错误和运行时错误等。通过实践,你将掌握 C# 控制台应用的基础知识,为进一步学习打下坚实基础。
573 49
|
数据采集 缓存 测试技术
性能测试中,除了迭代次数,还有哪些因素会影响测试结果?
性能测试中,除了迭代次数,还有哪些因素会影响测试结果?
362 2
线性代数——(期末突击)行列式(下)-行列式按行展开、范德蒙行列式、克拉默法则
线性代数——(期末突击)行列式(下)-行列式按行展开、范德蒙行列式、克拉默法则
734 7
|
Python
[python]为指定目录下的文件名批量加前缀
[python]为指定目录下的文件名批量加前缀
213 3
|
XML JSON 前端开发
深入对比TOML,JSON和YAML
坦率地说,在我开始与Hugo TOML合作之前,我感到羞耻是一个需要发现的新领域,但我对YAML和JSON非常熟悉。本文将帮助您了解如何通过不同的数据格式构建数据。       在Hugo中,您可以将所有这三种数据格式用于配置,前置事项和自定义数据,但TOML是用于整个项目的推荐格式。
10393 179