JS 如何判断当前页面是否全屏

2023-10-26

点击事件

      <span class="iconfont icon-quanping1" @click="fullscreenchange"></span>

js 代码

    fullscreenchange() {
    // fullScreen 被弃用
    // const isFullScreen = document.fullScreen || document.mozFullScreen || document.webkitIsFullScreen || document.msFullscreenElement
    
    // 最新写法
	  const isFullScreen = document.fullscreenElement
      
      if (isFullScreen) {
        console.log('退出全屏')
        if (document.exitFullscreen) {
          document.exitFullscreen()
        } else if (document.msExitFullscreen) {
          document.msExitFullscreen()
        } else if (document.mozCancelFullScreen) {
          document.mozCancelFullScreen()
        } else if (document.webkitCancelFullScreen) {
          document.webkitCancelFullScreen()
        }
      } else {
        var fullscreen = this.$refs.fullscreen   // 需要全屏的元素
        console.log('进入全屏')
        if (fullscreen.requestFullscreen) {
          fullscreen.requestFullscreen()
        } else if (fullscreen.mozRequestFullScreen) {
          fullscreen.mozRequestFullScreen()
        } else if (fullscreen.webkitRequestFullscreen) {
          fullscreen.webkitRequestFullscreen()
        } else if (fullscreen.msRequestFullscreen) {
          fullscreen.msRequestFullscreen()
        }
      }
    }

参考官网MDN 官网

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

JS 如何判断当前页面是否全屏 的相关文章

随机推荐

  • dedecms后台修改“系统基本参数”无效

    安装完dedecms的一些网站模板后 还原备份数据 系统基本参数也将会自动还原 能在 系统设置 下的 系统基本参数 里看到 但是 我遇到的情况是 无论怎么在系统基本参数里修改内容 更新系统缓存 都没能生效 后来通过直接修改代码实现 方法如下
  • 2020-03-05T06:26:07.000+0000

    JAVA JSON传输过程中时间问题 2020 03 05T06 26 07 000 0000转换成正常格式 2020 03 05 14 28 39 SimpleDateFormat sdf new SimpleDateFormat yyy
  • c语言比double精度更高的数据类型_数制与数据类型

    了解数制的分类 熟悉数据类型的分类 掌握整型数据类型的使用方法 掌握浮点型数据类型的使用方法 掌握字符型数据类型的使用方法 掌握不同数据类型之间的转化规则 掌握使用typedef定义类型的方法 二进制 八进制 十六进制 数制间的转换 二进制
  • SPI基础概念

    文章目录 目的 物理接线 极性和相位 信号时序 总结 目的 SPI Serial Perripheral Interface 是一种非常常用的全双工接口 这个接口在非常简单的机制下达到了比较高的通讯速度 比它通讯速度更高的常见的要不是并口
  • Qt 之 信号参数为QSharedPointer 智能指针类型

    文章目录 智能指针作为信号参数 再谈QSharedPointer Demo 1 Demo 2 智能指针作为信号参数 connect a module to the event bus Q DECLARE METATYPE QSharedPo
  • 【宝塔】centos7 如何简单安装nacos

    前言 宝塔如何安装 请访问 宝塔官方网址 https www bt cn new download html 进行安装 宝塔 宝塔页面 安装docker 查看示例图 登录宝塔页面后台 直接点击安装 等等就按着成功了 宝塔页面 安装nacos
  • 某个网站打不开,其他网站正常的原因及解决办法

    检测网站是否适应了cdn加速 可以在命令行中输入nslookup ip地址 nslookup http www 360doc com 如果address的值是多个 就证明使用了cdn加速 可以使用cdn检测工具检测各地使用cdn加速后网络情
  • mysql references关键字_mysql--一些关键字

    primary key 和unique key 在实际工作中 查看表设计总能看到这样的情况 一个primary 一个unique 还有一个key CREATE TABLE user id int 11 NOT NULL AUTO INCRE
  • 智能RFID电动车防盗管理系统解决方案

    一 RFID城市电动自行车技术诞生 随着城市经济的快速发展 电动自行车作为大众百姓日常出行的主要交通工具 数量急速增多 据统计 至2015年底全国电动自行车保有量已超过2亿辆 并且还以每年2000千万辆的速度增长 这方便民众出行的同时 也给
  • plsql替换

    s select from wh where dl delete from up update set aw a where 1 1 and sf select t rowid from srf select a rowid a from
  • React 性能优化,你需要知道的几个点

    转自于 https www jianshu com p 333f390f2e84 写了一段时间的react之后 渐渐的喜欢上了使用react来写应用 我们知道 Facebook在推出react时打出的旗号之一就是高性能 今天我们还一起来聊一
  • Python 手把手实现M3U8视频抓取

    声明 本文只作学习研究 禁止用于非法用途 否则后果自负 如有侵权 请告知删除 谢谢 此案例比较适合新手学习JS逆向 引言 本文出自微信公众号 Python三剑客 作者 阿K 阅读时长 5min 留言 文章输出我一直贯彻着即拿即用的方式为大家
  • java错误-The prefix "aop" for element "aop:aspectj-autoproxy" is not bound.

    配置springmvc的aop时出错 当我向配置文件中添加
  • web安全的漏洞种类

    SQL注入 SQL注入 SQL Injection 是一个常见的发生于应用程序和数据库之间的web安全漏洞 由于在开发过程中的设计不当导致程序中忽略了检查 没有有效的过滤用户的输入 是攻击者可以向服务器提交不正常的访问数据 即恶意的的SQL
  • logback.xml日志文件配置说明

  • MATLAB学习笔记(系统学习)

    教程来源 1 MATLAB教程 https www cainiaojc com matlab matlab tutorial html 不断学习补充中 文章目录 一 MATLAB基础 1 在MATLAB中使用分号 2 save命令用于将工作
  • windows:开机自动执行bat脚本

    参考 https blog csdn net li1325169021 article details 79889082
  • 在线等待,求高手,socket发送延迟问题

    在线等待 我的app可以按取颜色 色盘与固定颜色的button 使用tcp socket传输 让灯可以根据按的颜色做改变 目前碰到的问题是 1 前面动作都可以正常执行 但按取到后面时就会产生延迟的问题发生 颜色还是可按取 但灯不会变色 但时
  • 光通量发光强度照度亮度关系_照度、发光强度、光通量之间是什么关系

    我们发现有不少朋友对照度 发光强度和光通量这三个概念之间的关系总是搞混淆 包括他们各自的含义 以及标识单位 这里 我们就系统的来解读一下 首先 我们来看一下三者各自的名词解释 光通量 照度 亮度的关系 1 照度 也称光照度 指的是某光源照射
  • JS 如何判断当前页面是否全屏

    点击事件 span class iconfont icon quanping1 span js 代码 fullscreenchange fullScreen 被弃用 const isFullScreen document fullScree