当前位置： 首页 > news >正文

JS封装网页进入/退出全屏功能，兼容各大主流浏览器

news 文章来源：https://blog.csdn.net/nibabaoo/article/details/137344065 2024/11/5 15:47:10

1、演示

 2、封装进入全屏函数

mozRequestFullScreen：兼容Firefox

webkitRequestFullscreen：兼容 Chrome、Safari、Opera

msRequestFullscreen：兼容：IE/Edge

const enter = () => {const element = document.documentElementif (element.requestFullscreen) {element.requestFullscreen()} else if (element.mozRequestFullScreen) {element.mozRequestFullScreen()} else if (element.webkitRequestFullscreen) {element.webkitRequestFullscreen()} else if (element.msRequestFullscreen) {element.msRequestFullscreen()}}

依次判断当前页面或浏览器是否支持进入全屏模式以达到兼容效果

3、封装退出全屏函数

mozCancelFullScreen：兼容Firefox
webkitExitFullscreen： 兼容 Chrome、Safari、Opera
msExitFullscreen：兼容：IE/Edge

    const exit = () => {if (document.exitFullscreen) {document.exitFullscreen()} else if (document.mozCancelFullScreen) {document.mozCancelFullScreen()} else if (document.webkitExitFullscreen) {document.webkitExitFullscreen()} else if (document.msExitFullscreen) {document.msExitFullscreen()}}

依次判断当前页面或浏览器是否支持退出全屏模式以达到兼容效果

4、封装判断当前处于全屏的元素

mozFullScreenElement：兼容Firefox
webkitFullScreenElement： 兼容 Chrome、Safari、Opera
msFullScreenElement：兼容：IE/Edge

    const fullEle = () => {return document.fullscreenElement || document.mozFullScreenElement || document.msFullScreenElement || document.webkitFullScreenElement || null}

5、封装判断当前是否处于全屏，需借助第4步

    const isFull = () => {return !!fullEle()}

6、封装全屏/退出全屏 进行切换的函数

    const toggle = () => {isFull() ? exit() : enter()}

7、完整代码

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><style>div {padding: 10px;background-color: #eee;width: 300px;}button {background-color: #266fff;color: #fff;border: 0;width: 120px;height: 30px;}</style></head><body><button>进入/退出全屏</button><div>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dolorem veniam ullam totam quod ut, reprehenderit exercitationem sunt consequatur ipsacum suscipit cumque, eaque amet illum itaque unde vel adipisci aperiam expedita voluptatibus minima? Consequuntur amet magnam eaque vitaedebitis ab obcaecati adipisci modi earum quod, nihil alias nisi ipsum ipsam reiciendis unde architecto dolores ea expedita. Voluptas</div></body><script>const btn = document.querySelector('button')btn.onclick = () => {toggle()}// 进入全屏const enter = () => {const element = document.documentElementif (element.requestFullscreen) {element.requestFullscreen()} else if (element.mozRequestFullScreen) {element.mozRequestFullScreen()} else if (element.webkitRequestFullscreen) {element.webkitRequestFullscreen()} else if (element.msRequestFullscreen) {element.msRequestFullscreen()}}// 退出全屏const exit = () => {if (document.exitFullscreen) {document.exitFullscreen()} else if (document.mozCancelFullScreen) {document.mozCancelFullScreen()} else if (document.webkitExitFullscreen) {document.webkitExitFullscreen()} else if (document.msExitFullscreen) {document.msExitFullscreen()}}// 当前处于全屏的元素const fullEle = () => {return document.fullscreenElement || document.mozFullScreenElement || document.msFullScreenElement || document.webkitFullScreenElement || null}// 当前是否处于全屏状态const isFull = () => {return !!fullEle()}const toggle = () => {isFull() ? exit() : enter()}</script>
</html>

相关文章：

JS封装网页进入/退出全屏功能，兼容各大主流浏览器

1、演示 2、封装进入全屏函数 mozRequestFullScreen&#xff1a;兼容Firefox webkitRequestFullscreen&#xff1a;兼容 Chrome、Safari、Opera msRequestFullscreen&#xff1a;兼容&#xff1a;IE/Edge const enter () > {const element document.documentElementif (el…...

编程日记 2024/4/3 16:45:49

el-table的复选框勾选整行变色

要实现el-table的复选框勾选整行变色&#xff0c;你可以使用element-ui提供的row-class-name属性结合scoped slot来完成。 首先&#xff0c;你需要为el-table组件添加 row-class-name 属性&#xff0c;并给它绑定一个方法。在这个方法中&#xff0c;你可以根据你的业务逻辑来判…...

编程日记 2024/4/3 16:44:48

一步一步写线程之八线程池的完善之二数据结构封装

一、数据容器 在前面分析过&#xff0c;不管是线程任务的封装还是同步数据队列的封装&#xff0c;都是需要一个数据结构的。一用来说&#xff0c;如果没有什么特殊的原因&#xff0c;开发者都是使用STL中数据结构。比如前面经常见到的std::queue,std::deque,std::vector,std::…...

编程日记 2024/4/3 16:43:47

go连接数据库（原生）

根据官网文档 Go Wiki: SQL Database Drivers - The Go Programming Language 可以看到go可以连接的关系型数据库 ​ 常用的关系型数据库基本上都支持&#xff0c;下面以mysql为例 下载mysql驱动 打开上面的mysql链接 GitHub - go-sql-driver/mysql: Go MySQL Driver i…...

编程日记 2024/4/3 16:42:46

【C语言】2048小游戏【附源码】

欢迎来到英杰社区https://bbs.csdn.net/topics/617804998 一、游戏描述&#xff1a; 2048是一款数字益智类游戏&#xff0c;玩家需要使用键盘控制数字方块的移动&#xff0c;合并相同数字的方块&#xff0c;最终达到数字方块上出现“2048”的目标。 每次移动操作&#xff0c;所…...

编程日记 2024/4/3 16:41:44

部署项目遇到的各种问题总结

文章目录 前言一、后端问题 jar包运行出现错误宝塔面板使用jdk17二、数据库问题 版本问题三、前端问题 连不上后端总结 前言 在做完项目之后&#xff0c;为了让别人访问到自己的网站&#xff0c;就需要部署前端后端以及数据库&#xff0c;但是在部署的过程中出现了各种问题和困…...

编程日记 2024/4/3 16:39:42

JavaSE：抽象类和接口

目录 一、前言 二、抽象类 &#xff08;一&#xff09;抽象类概念 &#xff08;二&#xff09;使用抽象类的注意事项 &#xff08;三&#xff09;抽象类的作用 三、接口 &#xff08;一&#xff09;接口概念 &#xff08;二&#xff09;接口语法规则 &#xff08;三&a…...

编程日记 2024/4/3 16:38:40

发票是扫码验真好，还是OCR后进行验真好？

随着科技的进步&#xff0c;电子发票的普及使得发票的验真方式也在不断演进。目前&#xff0c;我们常见的发票验真方式主要有两种&#xff1a;一种是扫描发票上的二维码进行验真&#xff0c;另一种是通过OCR&#xff08;Optical Character Recognition&#xff0c;光学字符识别…...

编程日记 2024/4/3 16:37:39

【AIGC调研系列】AIGC+Jmeter实现接口自动化测试脚本生成

AIGC&#xff08;人工智能生成内容&#xff09;结合JMeter实现接口自动化测试脚本生成的方法&#xff0c;主要涉及到通过流量收集工具和AIGC技术获取用户操作接口数据&#xff0c;并利用这些数据生成自动化测试脚本的过程。这种方法可以有效提高软件测试的效率和质量[1]。JMete…...

编程日记 2024/4/3 16:32:29

前端|babel升级

问题 项目不支持可选链调用过多的 babel 插件 步骤 基础包 dependencies “react-scripts”: “5.0.1” devDependencies “customize-cra”: “^1.0.0”,“react-app-rewired”: “^2.2.1”, 框架包 dependencies “react”: “16.13.1”,“react-dom”: “16.13.1”, …...

编程日记 2024/4/3 16:31:27

【微服务】spring状态机模式使用详解

一、前言 在很多系统中&#xff0c;通常会涉及到某个业务需要进行各种状态的切换操作&#xff0c;例如在审批流程场景下&#xff0c;某个审批的向下流转需要依赖于上一个状态的结束&#xff0c;再比如电商购物场景中&#xff0c;一个订单的生命周期往往伴随着不同的状态&#…...

编程日记 2024/4/3 16:28:23

【算法刷题day14】Leetcode:144.二叉树的前序遍历、94.二叉树的中序遍历、145.二叉树的后序遍历

文章目录 二叉树递归遍历解题思路代码总结 二叉树的迭代遍历解题思路代码总结 二叉树的统一迭代法解题思路代码总结 草稿图网站 java的Deque 二叉树递归遍历 题目&#xff1a; 144.二叉树的前序遍历 94.二叉树的中序遍历 145.二叉树的后序遍历 解析&#xff1a;代码随想录解析…...

编程日记 2024/4/3 16:27:21

mysql闲谈

如何定位慢查询 1、测试环境压测时&#xff0c;有的接口非常慢&#xff0c;响应时间超过2秒以上。当时系统部署了运维的监控系统Skywalking&#xff0c;在展示报表中可以看到是哪儿个接口慢&#xff0c;可以看到SQL具体执行时间。 2、如果没有类似的监控系统&#xff0c;在Mysq…...

编程日记 2024/4/3 16:22:15

物联网学习1、什么是 MQTT？

MQTT&#xff08;Message Queuing Telemetry Transport&#xff09;是一种轻量级、基于发布-订阅模式的消息传输协议&#xff0c;适用于资源受限的设备和低带宽、高延迟或不稳定的网络环境。它在物联网应用中广受欢迎&#xff0c;能够实现传感器、执行器和其它设备之间的高效通…...

编程日记 2024/4/3 16:21:14

【机器学习】数据探索(Data Exploration)---数据质量和数据特征分析

一、引言 在机器学习项目中&#xff0c;数据探索是至关重要的一步。它不仅是模型构建的基础&#xff0c;还是确保模型性能稳定、预测准确的关键。数据探索的过程中&#xff0c;数据质量和数据特征分析占据了核心地位。数据质量直接关系到模型能否从数据中提取有效信息&#xff…...

编程日记 2024/4/3 16:18:11

软件测试（一）--简介+主流技能+分类+模型+流程

一、软件及测试简介 1、软件生产过程 需求产生–需求文档–设计效果图–产品开发–产品测试&#xff08;测试产品与需求文档是否一致&#xff09;–部署上线 2、什么是软件测试 使用技术手段验证软件是否满足使用需求。 技术包括&#xff1a;&#xff08;使用网络技术测试安…...

编程日记 2024/4/3 16:17:10

技术引领，策略升级：腾讯云与你共探数字金融新篇章

引言 2024 年 3 月 27 日下午&#xff0c;在北京腾讯总部&#xff0c;一场关于大模型与数据要素时代数字金融发展的深入讨论火热进行中。【TVP 走进腾讯&#xff1a;大模型与数据要素时代的数字金融发展论坛】是在腾讯二十年发展历程和数字化实践的基础上&#xff0c;进一步探索…...

编程日记 2024/4/3 16:15:07

数据库-root密码丢失的重置方案(win11环境）

当在windows系统中安装的mysql由于操作不当&#xff0c;或者密码遗忘&#xff0c;今天测试了一下&#xff0c;可以用以下方法重置root的密码。 mysqlwindows环境root密码重置问题 在win10/11环境下mysql8密码遗忘后的重置密码方案。 停止mysql服务 查找windows中的mysql服务名称…...

编程日记 2024/4/3 16:12:03

免试生常问的一些问题汇总---专升本学习篇

1.你怎么理解你申请的专业？ 答：软件工程室一门涉及软件开发、维护和管理的工程学科。它结合了计算机科学、工程学和管理科学的原理，皆在通过系统化、规范化的方法来开发高质量的软件系统。 1.技术和支持 ：软件工程包括编程语言、算法、数据结构、软件设计模式、软件测试、…...

编程日记 2024/4/3 16:11:02

FPGA的就业前景

FPGA&#xff08;Field-Programmable Gate Array&#xff09;技术在数字电路设计和嵌入式系统开发方面具有广泛的应用&#xff0c;因此在FPGA领域有着较好的就业前景。 目前&#xff0c;FPGA在通信、计算机、消费电子、汽车、航空航天等行业中得到了广泛应用。随着新一代通信网…...

编程日记 2024/4/3 16:07:58

7.阻塞模式与非阻塞模式

1.阻塞模式 一个线程来处理多个连接显得力不从心 accept等待连接 是一个阻塞方法 read读取SocketChannel中的数据 是一个阻塞方法 /*** 服务端* param args* throws IOException*/public static void main(String[] args) throws IOException {//建立一个缓冲区ByteBuffer b…...

编程日记 2024/4/3 16:06:56

Unity类银河恶魔城学习记录11-10 p112 Items drop源代码

Alex教程每一P的教程原代码加上我自己的理解初步理解写的注释&#xff0c;可供学习Alex教程的人参考 此代码仅为较上一P有所改变的代码 【Unity教程】从0编程制作类银河恶魔城游戏_哔哩哔哩_bilibili ItemObject_Trigger.cs using System.Collections; using System.Collecti…...

编程日记 2024/4/3 16:02:51

EasyExcel 模板导出excel、合并单元格及单元格样式设置。 Freemarker导出word 合并单元格

xls文件&#xff1a; 后端代码&#xff1a; InputStream filePath this.getClass().getClassLoader().getResourceAsStream(templateFile);// 根据模板文件生成目标文件ExcelWriter excelWriter EasyExcel.write(orgInfo.getFilename()).excelType(ExcelTypeEnum.XLS).withTe…...

编程日记 2024/4/3 16:00:49

炫我科技：云渲染领域的佼佼者

随着数字化时代的来临&#xff0c;云渲染技术正逐渐成为影视、游戏、动画等创意产业的重要支柱。在这一领域中&#xff0c;炫我科技凭借其卓越的技术实力、优质的服务以及不断创新的精神&#xff0c;已然成为了云渲染行业的佼佼者。 炫我科技自成立之初&#xff0c;便以打造高…...

编程日记 2024/4/3 15:59:47

VsCode正确解决vue3+Eslint+prettier+Vetur的配置冲突

手把手教你VsCode正确解决vue3EslintprettierVetur的配置冲突 VsCode正确解决vue3EslintprettierVetur的配置冲突Eslint文档查看和修改规则&#xff1a;step1&#xff1a;首先快速浏览下规则简要setp2: ctrlF 搜索你要配置规则的英文名&#xff0c;例如attributesetp3: 修改配置…...

编程日记 2024/4/3 15:57:44

计算机网络—VLAN 间路由配置

目录 1.拓扑图 2.实验环境准备 3.为 R3 配置 IP 地址 4.创建 VLAN 5.配置 R2 上的子接口实现 VLAN 间路由 6.配置文件 1.拓扑图 2.实验环境准备 配置R1、R3和S1的设备名称&#xff0c;并按照拓扑图配置R1的G0/0/1接口的IP地址。 [Huawei]sysname R1 [R1]interface Giga…...

编程日记 2024/4/3 15:53:39

微服务篇-C 深入理解第一代微服务（SpringCloud）_VII 深入理解Swagger接口文档可视化管理工具

原创作者&#xff1a;田超凡&#xff08;程序员田宝宝&#xff09; 版权所有&#xff0c;引用请注明原作者&#xff0c;严禁复制转载 Part 1 理论部分 1 传统API接口文档存在的问题&#xff1f; 1 对API接口文档进行更新的时候&#xff0c;需要及时将变化通知前端开发人员&…...

编程日记 2024/4/3 15:52:38

区块链的应用领域：重塑未来的信任机制

区块链作为一种新兴的技术&#xff0c;正在逐渐改变我们的生活。它以其独特的优势&#xff0c;正在开启一个信任的新时代。在金融、供应链管理、医疗健康、教育、文化娱乐、房地产等众多领域&#xff0c;区块链已经崭露头角&#xff0c;以其独特的方式发挥着作用。 1.金融领域…...

编程日记 2024/4/3 15:50:34

怎么在循环List的时候删除List的元素

怎么在循环List的时候删除List的元素 1. 先给出结论 任何时候都不要在 for 循环中删除 List 集合元素 2. 为什么在 for 循环中删除 List 集合元素是错误的 在 for 循环中删除 List 集合元素的问题主要是因为循环的迭代器和 List 集合的元素索引之间的冲突。在使用 for 循环遍历…...

编程日记 2024/4/3 15:46:30

SpringBoot+thymeleaf完成视频记忆播放功能

一、背景 1）客户要做一个视频播放功能，要求是系统能够记录观看人员在看视频时能够记录看到了哪个位置，在下次观看视频的时候能够从该位置进行播放。 2）同时，也要能够记录是谁看了视频，看了百分之多少。 说明：由于时间关系和篇幅原因，我们这里只先讨论第一个要求，第…...

编程日记 2024/4/3 15:45:28

电子商务网站建设特色/google seo是什么啊

多点触控技术 1 简介 Android多点触控在本质上需要LCD驱动和程序本身设计上支持&#xff0c;目前市面上HTC、Motorola和Samsung等知名厂商只要使用电容屏触控原理的手机均可以支持多点触控Multitouch技术&#xff0c;对于网页缩放、手势操作上有更好的用户体验。 在Android平台…...

编程日记 2024/11/5 13:12:36

做科研有什么好的网站/链接点击量软件

摘要&#xff1a;本文从软件质量的有关概念出发&#xff0c;根据指标选取原则&#xff0c;在分析软件质量特征的基础上提出了相应的软件质量评估指标的选取原则&#xff0c;并进而建立了软件质量评估体系。关键词&#xff1a;软件质量 质量评估指标体系1 软件质量的有关概念软件…...

编程日记 2024/11/5 11:45:12

静态网站做毕业设计/seo在线培训机构

一. ThreadLocal是什么 ThreadLocal 可以理解为线程本地变量&#xff0c;每个线程拥有本地变量的副本&#xff0c;各个线程之间的变量互不干扰&#xff0c;主要用于保证多线程环境下变量的安全。 也就是对于同一个 ThreadLocal&#xff0c;每个线程通过 get、set、remove 接口…...

编程日记 2024/11/5 7:56:21

将网站制作成app/比较好的网络推广平台

https://blog.csdn.net/ylforever/article/details/79191182 转载于:https://www.cnblogs.com/2016-cxp/p/10915529.html...

编程日记 2024/11/5 7:21:29

北京做手机网站建设/精准客户截流软件

GLSurfaceView 是一个视图&#xff0c;继承至SurfaceView&#xff0c;它内嵌的surface专门负责OpenGL渲染。 在使用的时候要实现以下几步。 一、创建自定义1类继承自GLSurfaceView&#xff0c;并创建构造器 二、创建自定义2类实现GLSurfaceView.Renderer接口 重写onDrawFrame(G…...

编程日记 2024/11/5 6:16:34

wordpress模板+bridge/企业网络营销目标

1. 工作机制 一个数据块在 DataNode 上以文件形式存储在磁盘上&#xff0c;包括两个文件&#xff0c;一个是数据本身&#xff0c;一个是元数据包括数据块的长度&#xff0c;块数据的校验和&#xff0c;以及时间戳。DataNode 启动后向 NameNode 注册&#xff0c;通过后&#xff…...

编程日记 2024/11/5 5:35:56