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

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

news 2026/5/11 16:19:19

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：兼容Firefox webkitRequestFullscreen：兼容 Chrome、Safari、Opera msRequestFullscreen：兼容：IE/Edge const enter () > {const element document.documentElementif (el…...

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

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

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

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

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

一、数据容器在前面分析过，不管是线程任务的封装还是同步数据队列的封装，都是需要一个数据结构的。一用来说，如果没有什么特殊的原因，开发者都是使用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可以连接的关系型数据库常用的关系型数据库基本上都支持，下面以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 一、游戏描述： 2048是一款数字益智类游戏，玩家需要使用键盘控制数字方块的移动，合并相同数字的方块，最终达到数字方块上出现“2048”的目标。每次移动操作，所…...

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

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

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

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

JavaSE：抽象类和接口

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

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

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

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

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

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

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

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

问题项目不支持可选链调用过多的 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状态机模式使用详解

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

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

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

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

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

mysql闲谈

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

当在windows系统中安装的mysql由于操作不当，或者密码遗忘，今天测试了一下，可以用以下方法重置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（Field-Programmable Gate Array）技术在数字电路设计和嵌入式系统开发方面具有广泛的应用，因此在FPGA领域有着较好的就业前景。目前，FPGA在通信、计算机、消费电子、汽车、航空航天等行业中得到了广泛应用。随着新一代通信网…...

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

5个关键技巧：让魔兽争霸III在现代Windows系统流畅运行

5个关键技巧：让魔兽争霸III在现代Windows系统流畅运行【免费下载链接】WarcraftHelper Warcraft III Helper , support 1.20e, 1.24e, 1.26a, 1.27a, 1.27b 项目地址: https://gitcode.com/gh_mirrors/wa/WarcraftHelper 还在为魔兽争霸III在Windows 10/11上…...

编程新知 2026/5/11 16:14:11

别再只会用save了！Matlab fwrite函数实战：手把手教你高效读写二进制文件（附完整代码）

Matlab二进制文件高效读写指南：fwrite函数深度解析与实战在数据处理领域，二进制文件因其紧凑性和高效性而备受青睐。对于Matlab用户而言，虽然save函数简单易用，但在处理大规模数据或需要跨平台交换时，fwrite函数才是…...

编程新知 2026/5/11 15:13:29

告别枯燥理论！用eNSP模拟一次家庭/小型办公室无线组网：从AC配置、AP上线到手机连接全流程

告别枯燥理论！用eNSP模拟一次家庭/小型办公室无线组网：从AC配置、AP上线到手机连接全流程想象一下这样的场景：周末在家办公时，手机突然提示"Wi-Fi信号弱"；小型会议室里，同事们抱怨视频会议卡顿。…...

编程新知 2026/5/11 12:07:42

FGO自动化终极指南：告别枯燥刷本，每天节省3小时游戏时间

FGO自动化终极指南：告别枯燥刷本，每天节省3小时游戏时间【免费下载链接】FGA Auto-battle app for F/GO Android 项目地址: https://gitcode.com/gh_mirrors/fg/FGA 你是否厌倦了在《Fate/Grand Order》（FGO）中重复点击刷…...

编程新知 2026/5/11 9:51:50