讲师中心 微信公众号
AI工具推荐 视频效率加速

如何用javascript操作全屏api_javascript怎样控制显示模式

轻芳君_2476

轻芳君_2476

发布时间:2026-01-09 18:16:02

|

1044人浏览过

|

来源于php中文网

原创

全屏API的核心方法是requestFullscreen();它返回Promise需显式处理,旧版浏览器有带前缀的变体;iOS Safari完全不支持,Android WebView需特定配置否则静默失败。

如何用javascript操作全屏api_javascript怎样控制显示模式

全屏 API 的核心方法是 requestFullscreen(),不是 fullscreen() 或 launchFullscreen()

浏览器不支持统一命名的“全屏函数”,必须调用 DOM 元素上的 requestFullscreen() 方法。这个方法返回 Promise,在现代浏览器中需显式处理;旧版 Chrome/ Safari 曾用 webkitRequestFullscreen(),Firefox 用过 mozRequestFullScreen() —— 现在已基本废弃,但若需兼容较老版本(如 Chrome

常见错误是直接调用 document.requestFullscreen() 而没检查元素上下文:该方法只能由**用户手势触发**(如 click、keydown),且必须作用于一个可渲染的 DOM 元素(<div>、<code><video></video>、<canvas></canvas> 等),不能直接对 document 或 window 调用(除非是 document.documentElement,但也不推荐)。

  • document.body.requestFullscreen() 可行,但部分浏览器会拒绝非内容区域的全屏请求
  • 更稳妥的做法是包裹一个 <div id="app">,然后调用 <code>document.getElementById('app').requestFullscreen()
  • 若调用后 Promise 拒绝,catch 中通常得到 TypeError: Document not active 或 SecurityError,说明触发条件不满足
  • 判断是否处于全屏状态,用 document.fullscreenElement,不是 isFullscreen 或 fullscreenEnabled

    document.fullscreenElement 是当前处于全屏模式的 DOM 元素(null 表示未全屏),这是唯一可靠的状态判断依据。注意拼写是 fullscreen(无连字符),且大小写敏感 —— document.fullScreenElement(带大写 S)是旧 IE 的遗留写法,已无效。

    document.fullscreenEnabled 仅表示“当前文档是否允许进入全屏”,它不反映实际状态,比如页面被 iframe 嵌入且 sandbox 属性禁用了全屏,该值就是 false,但你仍可能看到 fullscreenElement 非 null(极少见,多因嵌套权限混乱)。

    立即学习“Java免费学习笔记(深入)”;

    • 监听状态变化应使用 document.addEventListener('fullscreenchange', handler),而不是轮询
    • 退出全屏统一用 document.exitFullscreen()(同样返回 Promise)
    • 不要依赖 screen.orientation 判断全屏,它只管设备方向,和全屏 API 无关

    全屏样式适配靠 :fullscreen 伪类,不是 .fullscreen 类名或 full-screen 属性

    CSS 中启用全屏专属样式,必须用标准伪类 :fullscreen(无连字符,小写)。它会匹配当前 fullscreenElement 及其所有后代。浏览器前缀版本如 :-webkit-full-screen、:-moz-full-screen 已逐步淘汰,现代项目只需写一次标准形式。

    java-api-doc-generator
    java-api-doc-generator

    分析 Java Spring Boot 后端 Controller 代码,自动生成 Markdown 格式的接口文档。当用户说“生成 Java 接口文档”、“生成 API 文档”、“从 Spring 代码生成文档”时触发。

    下载

    注意:该伪类不触发重排,但会覆盖原有样式,比如你设了 body { margin: 0 },在全屏下可能失效,需显式写 body:fullscreen { margin: 0 }。另外,:fullscreen 不支持在 Shadow DOM 内部生效(除非开启 delegatesFocus 并透出样式)。

    • 避免用 !important 强制覆盖,优先提高 CSS 选择器权重
    • 视频全屏时,<video></video> 自带浏览器控件样式,:fullscreen 只影响自定义 UI 层
    • 移动端 Safari 对 :fullscreen 支持有限,部分样式可能被忽略

    退出全屏失败?检查 document.exitFullscreen() 的 Promise 和触发时机

    document.exitFullscreen() 返回 Promise,但它的 resolve 并不保证界面已退出 —— 它只是表示退出请求已发出。真正完成以 fullscreenchange 事件为准。常见失败场景包括:

    • 调用时页面不在全屏状态(Promise resolve,但无实际效果)
    • 页面被其他脚本或插件抢占了全屏控制权(如视频播放器自己管理全屏)
    • 在非主线程(如 Web Worker)中调用,直接抛 DOMException
    • 从 iframe 内调用,且父页面未设置 allow="fullscreen" 属性
    button.addEventListener('click', () => {
      if (document.fullscreenElement) {
        document.exitFullscreen()
          .catch(err => console.warn('Exit failed:', err));
      } else {
        appDiv.requestFullscreen()
          .catch(err => console.warn('Enter failed:', err));
      }
    });

    最易被忽略的是:全屏 API 在 iOS Safari 上完全不可用(仅支持原生视频全屏按钮),且 Android WebView 若未配置 WebSettings.setJavaScriptEnabled(true) 和 setMediaPlaybackRequiresUserGesture(false),也可能静默失败。

相关文章

java速学教程(入门到精通)
java速学教程(入门到精通)

java怎么学习?java怎么入门?java在哪学?java怎么学才快?不用担心,这里为大家提供了java速学教程(入门到精通),有需要的小伙伴保存下载就能学习啦!

下载

本站声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热门AI工具

更多
小橡皮AI

一款AI工具,主要用于小橡皮一键去AI味,将机器味重的内容改得更有活人感,防止因为 AI 内容被平台打上 AI 标签,以及限流,适合需要提升相关任务效率的用户。

二狗PPT
二狗PPT Hot

一款AI演示文稿工具,主要用于专为中式职场打造的AI PPT生成工具,适合需要提升相关任务效率的用户。

豆包大模型

豆包大模型是一款由字节跳动推出的企业级大语言模型服务平台。

WorkBuddy

一款AI办公效率工具,主要用于腾讯云推出的AI原生桌面智能体工作台,适合需要提升相关任务效率的用户。

创客贴AI

创客贴AI是一款AI图像与设计工具,AI辅助的智能在线设计工具。

DeepSeek

DeepSeek是一款面向对话、写作、编程和推理场景的AI大模型工具。

讯飞智作

讯飞智作是一款AI视频创作工具,AI文本配音工具,数字人课程、营销视频制作。

Laper
Laper Hot

Laper是专为编剧、导演和制片人推出的 AI 原生剧本创作工具。

UP简历
UP简历 Hot

一款AI办公效率工具,主要用于基于AI技术的免费在线简历制作工具,适合需要提升相关任务效率的用户。

相关专题

更多
chrome什么意思
chrome什么意思

chrome是浏览器的意思,由Google开发的网络浏览器,它在2008年首次发布,并迅速成为全球最受欢迎的浏览器之一。本专题为大家提供chrome相关的文章、下载、课程内容,供大家免费下载体验。

2806

2023.08.11

chrome无法加载插件怎么办
chrome无法加载插件怎么办

chrome无法加载插件可以通过检查插件是否已正确安装、禁用和启用插件、清除插件缓存、更新浏览器和插件、检查网络连接和尝试在隐身模式下加载插件方法解决。更多关于chrome相关问题,详情请看本专题下面的文章。php中文网欢迎大家前来学习。

5579

2023.11.06

Chrome开启无痕模式
Chrome开启无痕模式

本专题整合了Chrome无痕模式开启相关内容,阅读专题下面的文章了解更多详细教程。

3987

2026.03.24

c语言中null和NULL的区别
c语言中null和NULL的区别

c语言中null和NULL的区别是:null是C语言中的一个宏定义,通常用来表示一个空指针,可以用于初始化指针变量,或者在条件语句中判断指针是否为空;NULL是C语言中的一个预定义常量,通常用来表示一个空值,用于表示一个空的指针、空的指针数组或者空的结构体指针。

549

2023.09.22

java中null的用法
java中null的用法

在Java中,null表示一个引用类型的变量不指向任何对象。可以将null赋值给任何引用类型的变量,包括类、接口、数组、字符串等。想了解更多null的相关内容,可以阅读本专题下面的文章。

1698

2024.03.01

线程和进程的区别
线程和进程的区别

线程和进程的区别:线程是进程的一部分,用于实现并发和并行操作,而线程共享进程的资源,通信更方便快捷,切换开销较小。本专题为大家提供线程和进程区别相关的各种文章、以及下载和课程。

4398

2023.08.10

DOM是什么意思
DOM是什么意思

dom的英文全称是documentobjectmodel,表示文件对象模型,是w3c组织推荐的处理可扩展置标语言的标准编程接口;dom是html文档的内存中对象表示,它提供了使用javascript与网页交互的方式。想了解更多的相关内容,可以阅读本专题下面的文章。

6521

2024.08.14

promise的用法
promise的用法

“promise” 是一种用于处理异步操作的编程概念,它可以用来表示一个异步操作的最终结果。Promise 对象有三种状态:pending(进行中)、fulfilled(已成功)和 rejected(已失败)。Promise的用法主要包括构造函数、实例方法(then、catch、finally)和状态转换。

4600

2023.10.12

Gradle插件开发入门教程
Gradle插件开发入门教程

本专题介绍Gradle插件开发的基本流程,涵盖插件类编写、自定义任务注册、扩展参数设计和插件应用方法,帮助你理解插件如何组织构建逻辑,减少多个项目之间的重复配置。

100

2026.10.22

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

相关下载

更多

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
Sass 教程
Sass 教程

共14课时 | 1.5万人学习

Bootstrap 5教程
Bootstrap 5教程

共46课时 | 6.1万人学习

CSS教程
CSS教程

共754课时 | 98.9万人学习

最新文章

更多

PDF工具

更多
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn