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

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

news 2025/9/15 0:43:43

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

KubeSphere 容器平台高可用：环境搭建与可视化操作指南

Linux_k8s篇 欢迎来到Linux的世界&#xff0c;看笔记好好学多敲多打&#xff0c;每个人都是大神&#xff01; 题目&#xff1a;KubeSphere 容器平台高可用&#xff1a;环境搭建与可视化操作指南 版本号: 1.0,0 作者: 老王要学习 日期: 2025.06.05 适用环境: Ubuntu22 文档说…...

编程新知 2025/9/14 11:31:13

Ubuntu系统下交叉编译openssl

一、参考资料 OpenSSL&&libcurl库的交叉编译 - hesetone - 博客园 二、准备工作 1. 编译环境 宿主机&#xff1a;Ubuntu 20.04.6 LTSHost&#xff1a;ARM32位交叉编译器&#xff1a;arm-linux-gnueabihf-gcc-11.1.0 2. 设置交叉编译工具链 在交叉编译之前&#x…...

编程新知 2025/8/5 22:19:11

golang循环变量捕获问题​​

在 Go 语言中&#xff0c;当在循环中启动协程&#xff08;goroutine&#xff09;时&#xff0c;如果在协程闭包中直接引用循环变量&#xff0c;可能会遇到一个常见的陷阱 - ​​循环变量捕获问题​​。让我详细解释一下&#xff1a; 问题背景 看这个代码片段&#xff1a; fo…...

编程新知 2025/7/5 11:03:11

Qt Widget类解析与代码注释

#include "widget.h" #include "ui_widget.h"Widget::Widget(QWidget *parent): QWidget(parent), ui(new Ui::Widget) {ui->setupUi(this); }Widget::~Widget() {delete ui; }//解释这串代码&#xff0c;写上注释 当然可以&#xff01;这段代码是 Qt …...

编程新知 2025/6/15 21:47:30

条件运算符

C中的三目运算符&#xff08;也称条件运算符&#xff0c;英文&#xff1a;ternary operator&#xff09;是一种简洁的条件选择语句&#xff0c;语法如下&#xff1a; 条件表达式 ? 表达式1 : 表达式2• 如果“条件表达式”为true&#xff0c;则整个表达式的结果为“表达式1”…...

编程新知 2025/9/11 12:54:54

postgresql|数据库|只读用户的创建和删除（备忘）

CREATE USER read_only WITH PASSWORD 密码 -- 连接到xxx数据库 \c xxx -- 授予对xxx数据库的只读权限 GRANT CONNECT ON DATABASE xxx TO read_only; GRANT USAGE ON SCHEMA public TO read_only; GRANT SELECT ON ALL TABLES IN SCHEMA public TO read_only; GRANT EXECUTE O…...

编程新知 2025/8/19 20:22:44

Springcloud：Eureka 高可用集群搭建实战（服务注册与发现的底层原理与避坑指南）

引言&#xff1a;为什么 Eureka 依然是存量系统的核心&#xff1f; 尽管 Nacos 等新注册中心崛起&#xff0c;但金融、电力等保守行业仍有大量系统运行在 Eureka 上。理解其高可用设计与自我保护机制&#xff0c;是保障分布式系统稳定的必修课。本文将手把手带你搭建生产级 Eur…...

编程新知 2025/9/14 20:40:14

C++中string流知识详解和示例

一、概览与类体系 C 提供三种基于内存字符串的流&#xff0c;定义在 <sstream> 中&#xff1a; std::istringstream&#xff1a;输入流&#xff0c;从已有字符串中读取并解析。std::ostringstream&#xff1a;输出流&#xff0c;向内部缓冲区写入内容&#xff0c;最终取…...

编程新知 2025/8/15 2:04:44

MySQL用户和授权

开放MySQL白名单 可以通过iptables-save命令确认对应客户端ip是否可以访问MySQL服务&#xff1a; test: # iptables-save | grep 3306 -A mp_srv_whitelist -s 172.16.14.102/32 -p tcp -m tcp --dport 3306 -j ACCEPT -A mp_srv_whitelist -s 172.16.4.16/32 -p tcp -m tcp -…...

编程新知 2025/8/25 19:12:45

PAN/FPN

import torch import torch.nn as nn import torch.nn.functional as F import mathclass LowResQueryHighResKVAttention(nn.Module):"""方案 1: 低分辨率特征 (Query) 查询高分辨率特征 (Key, Value).输出分辨率与低分辨率输入相同。"""def __…...

编程新知 2025/7/6 7:40:12