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

将某一个 DIV 块全屏展示

news 2025/7/14 3:33:03

文章目录

    • 需求
    • 分析

需求

上节我们研究了如何将页面中的指定 div 下载为图片：跳转查看
本节演技一下如何将 DIV 全屏展示

全屏展示某一个 DIV
在这里插入图片描述

在这里插入图片描述

分析

  • 其实就是模拟键盘动作 F11
var element = document.getElementById('pic')
var requestMethod = element.requestFullScreen || element.webkitRequestFullScreen || element.mozRequestFullScreen || element.msRequestFullScreen
if (requestMethod) {requestMethod.call(element)
} else if (typeof window.ActiveXObject !== 'undefined') {var wscript = new ActiveXObject('WScript.Shell')if (wscript !== null) {wscript.SendKeys('{F11}')}
}
  • demo1.html
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>全屏展示</title><style>.top {margin: 15px;
}
.main {width: 100%;height: 1000px;display: flex;
}
.left {width: 50%;height: 60%;background: gray;padding: 20px;
}
.left-son {width: 80%;height: 50%;margin: 15px;background: red;
}
.right {width: 50%;height: 60%;background: #dddddd;
}
/* 针对dom的全屏设置 */
.left:-webkit-full-screen {background: #fff;
}
/* 全屏属性 */
:-webkit-full-screen {
}
:-moz-full-screen {
}
:-ms-fullscreen {
}
/* 全屏伪类 当前chrome:70 不支持 */
:full-screen {
}
:fullscreen {/* IE11支持 */
}</style>
</head><body><!--* @Author: OBKoro1* @Github: https://github.com/OBKoro1* @Date: 2018-11-15 18:49:33* @LastEditors: OBKoro1* @LastEditTime: 2018-11-23 18:20:36* @Description: 浏览器全屏class类演示demo--><div class="top"><button onclick="leftScreen()">左边全屏</button><button onclick="rightScreen()">右边全屏</button></div><div class="main"><div class="left"><button onclick="redScreen()">红色全屏</button><button onclick="exitScreen()">退出全屏</button><div class="left-son"><button onclick="exitScreen()">红色退出全屏</button><span>左边的内容</span></div></div><div class="right">右边的内容</div></div>
</body></html><script>class fullScreen {/*** @description: 全屏初始化* @param {Function} fn 用户浏览器不支持全屏的回调*/constructor(fn) {this.prefixName = ""; // 浏览器前缀this.isFullscreenData = true; // 浏览器是否支持全屏this.isFullscreen(fn);}/*** @description: 将传进来的元素全屏* @param {String} domName 要全屏的dom名称*/Fullscreen (domName) {const element = document.querySelector(domName);const methodName =this.prefixName === ""? "requestFullscreen": `${this.prefixName}RequestFullScreen`;element[methodName]();}// 退出全屏exitFullscreen () {const methodName =this.prefixName === ""? "exitFullscreen": `${this.prefixName}ExitFullscreen`;document[methodName]();}/*** @description: 监听进入/离开全屏* @param {Function} enter 进入全屏的回调*  @param {Function} quit 离开全屏的回调*/screenChange (enter, quit) {if (!this.isFullscreenData) return;const methodName = `on${this.prefixName}fullscreenchange`;document[methodName] = e => {if (this.isElementFullScreen()) {enter && enter(e); // 进入全屏回调} else {quit && quit(e); // 离开全屏的回调}};}/*** @description: 浏览器无法进入全屏时触发,可能是技术原因，也可能是用户拒绝：比如全屏请求不是在事件处理函数中调用,会在这里拦截到错误* @param {Function} enterErrorFn 回调*/screenError (enterErrorFn) {const methodName = `on${this.prefixName}fullscreenerror`;document[methodName] = e => {enterErrorFn && enterErrorFn(e);};}/*** @description: 是否支持全屏+判断浏览器前缀* @param {Function} fn 不支持全屏的回调函数 这里设了一个默认值*/isFullscreen (fn) {let fullscreenEnabled;// 判断浏览器前缀if (document.fullscreenEnabled) {fullscreenEnabled = document.fullscreenEnabled;} else if (document.webkitFullscreenEnabled) {fullscreenEnabled = document.webkitFullscreenEnabled;this.prefixName = "webkit";} else if (document.mozFullScreenEnabled) {fullscreenEnabled = document.mozFullScreenEnabled;this.prefixName = "moz";} else if (document.msFullscreenEnabled) {fullscreenEnabled = document.msFullscreenEnabled;this.prefixName = "ms";}if (!fullscreenEnabled) {this.isFullscreenData = false;fn && fn(); // 执行不支持全屏的回调}}/*** @description: 检测有没有元素处于全屏状态* @return 布尔值*/isElementFullScreen () {const fullscreenElement =document.fullscreenElement ||document.msFullscreenElement ||document.mozFullScreenElement ||document.webkitFullscreenElement;if (fullscreenElement === null) {return false; // 当前没有元素在全屏状态} else {return true; // 有元素在全屏状态}}}let full = new fullScreen(() => {console.log("不支持");});full.screenError(e => {console.log("进去全屏失败:", e);});// 全屏请求必须在事件处理函数中调用，否则将会被拒绝。full.Fullscreen(".left"); // 触发进去全屏失败回调const obj = {enter: e => {// 如果退出全屏 退出的还是全屏状态，将会触发进入全屏的回调，这种情况比较少 注意一下console.log("进入全屏", e);},quit: e => {console.log("退出全屏", e);// 通常不会出现嵌套的情况}};full.screenChange(obj.enter, obj.quit);function leftScreen () {full.Fullscreen(".left");}function rightScreen () {full.Fullscreen(".right");}function redScreen () {full.Fullscreen(".left-son");}// 退出全屏 退出到上次的状态function exitScreen () {full.exitFullscreen();}
</script>
  • demo2.html
<html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>#container {position: absolute;top: 0;left: 0;bottom: 0;right: 0;background-color: red;}
</style><body><div id="container"><div id="content" style="margin:0 auto;height:45%;width:80%px; background:orange;"><button id="btn">全屏</button><button id="close">退出</button><h1>js控制页面部分区域的全屏展示和退出全屏显示</h1></div></div>
</body>
<script language="JavaScript">var btn = document.getElementById("btn");btn.onclick = function () {var elem = document.getElementById("content");requestFullScreen(elem);};var close = document.getElementById("close");close.onclick = function () {exitFullscreen();};function requestFullScreen (element) {var requestMethod = element.requestFullScreen || element.webkitRequestFullScreen || element.mozRequestFullScreen || element.msRequestFullScreen;if (requestMethod) {requestMethod.call(element);} else if (typeof window.ActiveXObject !== "undefined") {var wscript = new ActiveXObject("WScript.Shell");if (wscript !== null) {wscript.SendKeys("{F11}");}}}function exitFullscreen () {if (document.exitFullscreen) {document.exitFullscreen();} else if (document.msExitFullscreen) {document.msExitFullscreen();} else if (document.mozCancelFullScreen) {document.mozCancelFullScreen();} else if (document.webkitExitFullscreen) {document.webkitExitFullscreen();}}</script></html>

相关文章：

将某一个 DIV 块全屏展示

文章目录 需求分析 需求 上节我们研究了如何将页面中的指定 div 下载为图片&#xff1a;跳转查看 本节演技一下如何将 DIV 全屏展示 全屏展示某一个 DIV 分析 其实就是模拟键盘动作 F11 var element document.getElementById(pic) var requestMethod element.requestFullS…...

编程日记 2024/5/24 15:51:25

K8S集群再搭建

前述&#xff1a;总体是非常简单的&#xff0c;就是过程繁琐&#xff0c;不过都是些重复的操作 master成员: [controller-manager, scheduler, api-server, etcd, proxy,kubelet] node成员: [kubelet, proxy] master要修改的配置文件有 1. vi /etc/etcd/etcd.conf # 数…...

编程日记 2024/5/24 15:50:24

工具-博客搭建

以下相关讲解均基于hexo github pages方案&#xff0c;请注意&#xff01;&#xff01;&#xff01;博客搭建方案选择 参考文章1 搭建教程 参考文章1 hexo github pages搭建过程中遇到的问题 删除categories、tags 1、删除含有需要删除categories、tags的文章 2、hexo …...

编程日记 2024/5/24 15:47:21

贪心算法：合并区间

参考资料&#xff1a;代码随想录 题目链接&#xff1a;. - 力扣&#xff08;LeetCode&#xff09; 做过用最少数量的箭引爆气球和无重叠区间这两道题目后&#xff0c;题意和题解都不难理解。唯一的一点儿难点是对于api的运用。 class Solution {public int[][] merge(int[][…...

编程日记 2024/5/24 15:46:20

DFA 算法

为什么要学习这个算法 前一段时间遇到了瓶颈&#xff0c;因为词库太多了导致会有一些速度过慢&#xff0c;而且一个正则表达式已经放不下了&#xff0c;需要进行拆分正则才可以。 正好我以前看过有关 dfa 的介绍&#xff0c;但是并没有深入的进行研究&#xff0c;所以就趁着周…...

编程日记 2024/5/24 15:45:19

Web（数字媒体）期末作业

一.前言 1.本资源为类似于打飞机的网页游戏 2.链接如下&#xff1a;【免费】前端web或者数字媒体的期末作业&#xff08;类似于打飞机的2D网页小游戏&#xff09;资源-CSDN文库 二.介绍文档...

编程日记 2024/5/24 15:44:18

展现金融科技前沿力量，ATFX于哥伦比亚金融博览会绽放光彩

不到半个月的时间里&#xff0c;高光时刻再度降临ATFX。而这一次&#xff0c;是ATFX不曾拥有的桂冠—“全球最佳在线经纪商”(Best Global Online Broker)。2024年5月15日至16日&#xff0c;拉丁美洲首屈一指的金融盛会—2024年哥伦比亚金融博览会(Money Expo Colombia 2024) 于…...

编程日记 2024/5/24 15:42:16

html 根字号 以及 设置根元素font-size:calc(100vw/18.75)、元素rem实现自适应

rem 单位介绍&#xff1a;rem 是相对文档根元素(html)字体大小的尺寸单位&#xff0c;当元素的尺寸或文字字号等使用 rem 单位时&#xff0c;会随着根元素的 font-size变化而变化。 得出结论&#xff1a;在不同分辨率的设备下动态设置根元素的字体大小就可以实现页面自适应。 …...

编程日记 2024/5/24 15:40:13

size_t无符号数相关知识点

size_t无符号数相关知识点 在代码编译的时候&#xff0c;报错一个warning&#xff1a; comparison between signed and unsigned interger expression [-wsign-compare] 找到代码&#xff0c;告警这一段代码 size_t count timeProtocol.m_intersectionArray.size(); for (u…...

编程日记 2024/5/24 15:39:12

深度学习之基于Tensorflow+Flask框架Web手写数字识别

欢迎大家点赞、收藏、关注、评论啦 &#xff0c;由于篇幅有限&#xff0c;只展示了部分核心代码。 文章目录 一项目简介 二、功能三、系统四. 总结 一项目简介 一、项目背景与意义 手写数字识别是深度学习领域中的一个经典问题&#xff0c;也是计算机视觉领域的重要应用之一。…...

编程日记 2024/5/24 15:37:10

2024电工杯B题食谱评价与优化模型思路代码论文分析

2024年电工杯数学建模竞赛B题论文和代码已完成&#xff0c;代码为B题全部问题的代码&#xff0c;论文包括摘要、问题重述、问题分析、模型假设、符号说明、模型的建立和求解&#xff08;问题1模型的建立和求解、问题2模型的建立和求解、问题3模型的建立和求解&#xff09;、模型…...

编程日记 2024/5/24 15:36:09

blender安装cats-blender-plugin-0-19-0插件，导入pmx三维模型

UE5系列文章目录 文章目录 UE5系列文章目录前言一、Blender安装二、cats-blender-plugin-0-19-0插件下载三、下载bmp文件四、在blender2.93中安装cats-blender-plugin-0-19-0插件 前言 blender本身不支持pmx三维模型&#xff0c;需要用到cats-blender-plugin-0-19-0插件。 一…...

编程日记 2024/5/24 15:35:08

[源码+搭建教程]西游伏妖篇手游_GM_单机+和朋友玩

为了学习和研究软件内含的设计思想和原理&#xff0c;本人花心血和汗水带来了搭建教程&#xff01;&#xff01;&#xff01; 教程不适于服架设&#xff0c;严禁服架设&#xff01;&#xff01;&#xff01;请牢记&#xff01;&#xff01;&#xff01; 教程仅限学习使用&…...

编程日记 2024/5/24 15:34:07

windows、mac、linux中node版本的切换(nvm管理工具)，解决项目兼容问题 node版本管理、国内npm源镜像切换

文章目录 在工作中&#xff0c;我们可能同时在进行2个或者多个不同的项目开发&#xff0c;每个项目的需求不同&#xff0c;进而不同项目必须依赖不同版本的NodeJS运行环境&#xff0c;这种情况下&#xff0c;对于维护多个版本的node将会是一件非常麻烦的事情&#xff0c;nvm就是…...

编程日记 2024/5/24 15:33:05

【MySQL精通之路】全文搜索-布尔型全文搜索

1.使用方法 MySQL可以使用IN BOOLEAN MODE修饰符执行布尔全文搜索。 使用此修饰符&#xff0c;某些字符在搜索字符串中单词的开头或结尾具有特殊含义。 在下面的查询中&#xff0c;和-运算符分别表示单词必须存在或不存在&#xff0c;才能进行匹配。 因此&#xff0c;查询检…...

编程日记 2024/5/24 15:31:02

【学习笔记】C++每日一记[20240520]

简述几种内存泄漏的预防机制 用智能指针代替普通指针&#xff0c;由于智能指针自带引用计数功能&#xff0c;能够记录动态分配空间的引用数量&#xff0c;在引用计数为零时&#xff0c;自动调用析构函数释放空间。 借助一些内存泄漏检测工具&#xff0c;例如Valgrind、Memche…...

编程日记 2024/5/24 15:30:00

【热门话题】一文带你读懂公司是如何知道张三在脉脉上发了“一句话”的

按理说呢&#xff0c;A公司和脉脉属于不同的平台&#xff0c;而且脉脉上大家可以匿名发言&#xff0c;所以&#xff0c;即便我坐在你边上&#xff0c;我发了一句话上去&#xff0c;你也不知道是谁发的。但通过一些技术&#xff0c;我们却可以分析出&#xff0c;公司是如何知道张…...

编程日记 2024/5/24 15:28:59

linux命令日常使用思考

linux命令日常使用思考 复制的相关问题scp和cp的区别root192.168.5.229-r的理解 更新版本的相关问题svn info 根目录和家目录的区别根目录家目录 复制的相关问题 scp和cp的区别 安全性&#xff1a;SCP 是基于 SSH 的加密传输协议&#xff0c;可以保证数据在传输过程中的安全性…...

编程日记 2024/5/24 15:27:57

同余定理与哈希函数

目录 同余定理哈希函数加密算法 余数有很多的应⽤场景&#xff0c;⽐如散列函数、加密算法&#xff0c;循环冗余校验等等。生活中也有很多与余数有关的例子。 比如&#xff0c;你要将1147条数据分页写入&#xff0c;每页10条&#xff0c;计算总页数。就可以用1147除以10&#x…...

编程日记 2024/5/24 15:26:56

03-01-Vue组件的定义和注册

前言 我们接着上一篇文章02-Vue实例的生命周期函数 来讲。 下一篇文章 03-02-Vue组件之间的传值 什么是组件 组件&#xff1a; 组件的出现&#xff0c;就是为了拆分Vue实例的代码量的&#xff0c;能够让我们以不同的组件&#xff0c;来划分不同的功能模块&#xff0c;将来我们…...

编程日记 2024/5/24 15:24:54

以下是对华为 HarmonyOS NETX 5属性动画（ArkTS）文档的结构化整理，通过层级标题、表格和代码块提升可读性：

一、属性动画概述NETX 作用&#xff1a;实现组件通用属性的渐变过渡效果&#xff0c;提升用户体验。支持属性&#xff1a;width、height、backgroundColor、opacity、scale、rotate、translate等。注意事项&#xff1a; 布局类属性&#xff08;如宽高&#xff09;变化时&#…...

编程新知 2025/7/10 15:05:29

基于uniapp+WebSocket实现聊天对话、消息监听、消息推送、聊天室等功能，多端兼容

基于 ​UniApp + WebSocket​实现多端兼容的实时通讯系统，涵盖WebSocket连接建立、消息收发机制、多端兼容性配置、消息实时监听等功能，适配​微信小程序、H5、Android、iOS等终端 目录 技术选型分析WebSocket协议优势UniApp跨平台特性WebSocket 基础实现连接管理消息收发连接…...

编程新知 2025/7/13 6:15:25

dedecms 织梦自定义表单留言增加ajax验证码功能

增加ajax功能模块&#xff0c;用户不点击提交按钮&#xff0c;只要输入框失去焦点&#xff0c;就会提前提示验证码是否正确。 一&#xff0c;模板上增加验证码 <input name"vdcode"id"vdcode" placeholder"请输入验证码" type"text&quo…...

编程新知 2025/7/12 23:08:12

srs linux

下载编译运行 git clone https:///ossrs/srs.git ./configure --h265on make 编译完成后即可启动SRS # 启动 ./objs/srs -c conf/srs.conf # 查看日志 tail -n 30 -f ./objs/srs.log 开放端口 默认RTMP接收推流端口是1935&#xff0c;SRS管理页面端口是8080&#xff0c;可…...

编程新知 2025/7/12 0:04:09

Matlab | matlab常用命令总结

常用命令 一、 基础操作与环境二、 矩阵与数组操作（核心）三、 绘图与可视化四、 编程与控制流五、 符号计算 (Symbolic Math Toolbox)六、 文件与数据 I/O七、 常用函数类别重要提示这是一份 MATLAB 常用命令和功能的总结，涵盖了基础操作、矩阵运算、绘图、编程和文件处理等…...

编程新知 2025/6/20 11:09:49

HTML前端开发：JavaScript 常用事件详解

作为前端开发的核心&#xff0c;JavaScript 事件是用户与网页交互的基础。以下是常见事件的详细说明和用法示例&#xff1a; 1. onclick - 点击事件 当元素被单击时触发&#xff08;左键点击&#xff09; button.onclick function() {alert("按钮被点击了&#xff01;&…...

编程新知 2025/7/8 23:32:56

NFT模式：数字资产确权与链游经济系统构建

NFT模式&#xff1a;数字资产确权与链游经济系统构建 ——从技术架构到可持续生态的范式革命 一、确权技术革新&#xff1a;构建可信数字资产基石 1. 区块链底层架构的进化 跨链互操作协议&#xff1a;基于LayerZero协议实现以太坊、Solana等公链资产互通&#xff0c;通过零知…...

编程新知 2025/7/13 22:02:25

k8s业务程序联调工具-KtConnect

概述 原理 工具作用是建立了一个从本地到集群的单向VPN&#xff0c;根据VPN原理&#xff0c;打通两个内网必然需要借助一个公共中继节点&#xff0c;ktconnect工具巧妙的利用k8s原生的portforward能力&#xff0c;简化了建立连接的过程&#xff0c;apiserver间接起到了中继节…...

编程新知 2025/7/13 18:57:27

在WSL2的Ubuntu镜像中安装Docker

Docker官网链接: https://docs.docker.com/engine/install/ubuntu/ 1、运行以下命令卸载所有冲突的软件包&#xff1a; for pkg in docker.io docker-doc docker-compose docker-compose-v2 podman-docker containerd runc; do sudo apt-get remove $pkg; done2、设置Docker…...

编程新知 2025/7/10 2:41:40

全面解析各类VPN技术：GRE、IPsec、L2TP、SSL与MPLS VPN对比

目录 引言 VPN技术概述 GRE VPN 3.1 GRE封装结构 3.2 GRE的应用场景 GRE over IPsec 4.1 GRE over IPsec封装结构 4.2 为什么使用GRE over IPsec&#xff1f; IPsec VPN 5.1 IPsec传输模式&#xff08;Transport Mode&#xff09; 5.2 IPsec隧道模式&#xff08;Tunne…...

编程新知 2025/7/8 16:12:53