浏览器全屏fullScreen

浏览器全屏fullScreen浏览器全屏和退出全屏操作 浏览器退出全屏报错及解决

浏览器全屏fullScreen

全屏操作

// 全屏 fullScreen () { 
    this.fullScreenVisible = true const element = document.getElementById('view-log');// 指定全屏区域元素 element.requestFullscreen() // fullscreenchange 事件当浏览器进入或离开全屏时触发 document.addEventListener("fullscreenchange", (e) => { 
    if (document.fullscreenElement == null) { 
    this.closeFullScreen() } }) }, 

退出全屏

// 退出全屏 closeFullScreen () { 
    this.fullScreenVisible = false if (document.fullscreenElement !== null) { 
    document.exitFullscreen(); } } 

退出全屏报错

报错如下:

Uncaught (in promise) TypeError: Failed to execute ‘exitFullscreen’ on ‘Document’: Document not active

报错原因:在未全屏的情况下触发exitFullscreen

解决方案:

// 在退出全屏前判断 document.fullscreenElement !== null if (document.fullscreenElement !== null) { 
    document.exitFullscreen(); } 
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请联系我们举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/220913.html原文链接:https://javaforall.net

(0)
上一篇 2026年3月17日 下午7:22
下一篇 2026年3月17日 下午7:22


相关推荐

  • 2017年前端面试题整理汇总100题

    2017年前端面试题整理汇总100题有兴趣的可以关注一下我的微信公众号 dotNET 全栈开发 分享一些前端知识和面试的题目 1 一些开放性题目 1 自我介绍 除了基本个人信息以外 面试官更想听的是你与众不同的地方和你的优势 2 项目介绍 3 如何看待前端开发 4 平时是如何学习前端开发的 5 未来三到五年的规划是怎样的 position 的值 relative 和 absolute 分别是相对于

    2026年3月27日
    2
  • 网络请求 header 的内容以及各个键值对的含义

    网络请求 header 的内容以及各个键值对的含义

    2021年11月11日
    49
  • lodash 常用总结

    lodash 常用总结merge 合并源对象的属性到目标对象中 merge object sources merge 遇到相同属性的时候 如果属性值为纯对象 plainobject 或者集合 collection 时 不是用后面的属性值去覆盖前面的属性值 而是会把前后两个属性值合并 如果源对象的属性值为 undefined 则会忽略该属性 merge a 1 b

    2025年9月1日
    12
  • Md语法简记

    Md语法简记MarkDown 语法 文章目录 MarkDown 语法 1 标题 2 文字格式 3 列表 4 区块 5 代码 6 链接 7 图片 8 表格 1 标题 在 md 格式下使用 来标记标题 有 N 个 时表示 N 级标题 后需要接一个空格 2 文字格式 文字字体 强调文本 或者 强调文本 加粗文本 或者 加粗文本 标记文本 删除文本 H 2 Ois 是液体 2

    2026年3月16日
    2
  • pip源配置

    pip源配置pip源配置1、使用配置文件配置文件[global]trusted-host=mirrors.aliyun.comindex-url=http://mirrors.aliyun.com/pypi/simple/配置文件放置位置Linux下:放在~/.pip/pip.confwindows下:用户文件夹下\pip\pip.ini2、使用命令行临时改变pip源pipinstall-i–trusted-hostpackage例如pipinstall-ihttp://

    2022年5月4日
    172
  • python向上取整和向下取整(python的三种取整方式)

    2019独角兽企业重金招聘Python工程师标准>>>…

    2022年4月18日
    114

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号