0

0

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

幻影之瞳

幻影之瞳

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

|

964人浏览过

|

来源于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> 等),不能直接对 documentwindow 调用(除非是 document.documentElement,但也不推荐)。

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

    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 已逐步淘汰,现代项目只需写一次标准形式。

    炫图AI
    炫图AI

    全能AI修图神器,AI换装、修图、改图、P图

    下载

    注意:该伪类不触发重排,但会覆盖原有样式,比如你设了 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),也可能静默失败。

热门AI工具

更多
DeepSeek
DeepSeek

幻方量化公司旗下的开源大模型平台

豆包大模型
豆包大模型

字节跳动自主研发的一系列大型语言模型

通义千问
通义千问

阿里巴巴推出的全能AI助手

腾讯元宝
腾讯元宝

腾讯混元平台推出的AI助手

文心一言
文心一言

文心一言是百度开发的AI聊天机器人,通过对话可以生成各种形式的内容。

讯飞写作
讯飞写作

基于讯飞星火大模型的AI写作工具,可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

即梦AI
即梦AI

一站式AI创作平台,免费AI图片和视频生成。

ChatGPT
ChatGPT

最最强大的AI聊天机器人程序,ChatGPT不单是聊天机器人,还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

相关专题

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

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

1020

2023.08.11

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

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

818

2023.11.06

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

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

252

2023.09.22

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

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

988

2024.03.01

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

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

723

2023.08.10

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

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

723

2023.08.10

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

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

4144

2024.08.14

promise的用法
promise的用法

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

333

2023.10.12

PHP高性能API设计与Laravel服务架构实践
PHP高性能API设计与Laravel服务架构实践

本专题围绕 PHP 在现代 Web 后端开发中的高性能实践展开,重点讲解基于 Laravel 框架构建可扩展 API 服务的核心方法。内容涵盖路由与中间件机制、服务容器与依赖注入、接口版本管理、缓存策略设计以及队列异步处理方案。同时结合高并发场景,深入分析性能瓶颈定位与优化思路,帮助开发者构建稳定、高效、易维护的 PHP 后端服务体系。

4

2026.03.04

热门下载

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

相关下载

更多

精品课程

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

共14课时 | 0.9万人学习

Bootstrap 5教程
Bootstrap 5教程

共46课时 | 3.5万人学习

CSS教程
CSS教程

共754课时 | 39.3万人学习

最新文章

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

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号