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

将某一个 DIV 块全屏展示

news 2026/5/23 11:35:04

文章目录

    • 需求
    • 分析

需求

上节我们研究了如何将页面中的指定 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

暗黑破坏神2角色编辑革命：Diablo Edit2如何彻底改变你的游戏体验

暗黑破坏神2角色编辑革命&#xff1a;Diablo Edit2如何彻底改变你的游戏体验 【免费下载链接】diablo_edit Diablo II Character editor. 项目地址: https://gitcode.com/gh_mirrors/di/diablo_edit 你是否曾因重复刷装备而疲惫&#xff0c;却依然无法获得心仪的属性组合…...

编程新知 2026/5/23 10:19:35

第三篇：必知必会的5个核心斜杠命令（/help、/compact、/clear、/cost、/exit）

&#x1f4cc; 标签&#xff1a;#斜杠命令 #会话管理 #效率工具 #必学Claude Code 的交互核心就是那几条斜杠命令。掌握它们&#xff0c;你就能像 Vim 高手一样行云流水地操控 AI。1. 为什么斜杠命令如此重要&#xff1f; Claude Code 的对话界面虽然看起来像普通聊天&#xff…...

编程新知 2026/5/23 9:26:38

SystemVerilog驱动强度解析：从三态总线到功耗分析的核心技术

1. 项目概述&#xff1a;为什么需要关注驱动强度&#xff1f;在数字电路设计和验证领域&#xff0c;SystemVerilog 作为一门强大的硬件描述与验证语言&#xff0c;其细节往往决定了仿真的精度和设计的可靠性。很多工程师&#xff0c;尤其是刚接触 RTL 设计或转向更复杂验证场景…...

编程新知 2026/5/23 7:11:59

【芯片测试】：SmarTest 开发环境入门

SmarTest 开发环境入门&#xff1a;Eclipse IDE 集成与工作区管理系列&#xff1a; Advantest V93000 SmarTest 8 核心概念解析&#xff5c;第 1 篇&#xff08;共 8 篇&#xff09; 适合读者&#xff1a; 初次接触 SmarTest 的测试工程师、ATE 软件开发者前言 很多工程师第一次…...

编程新知 2026/5/23 6:32:43

PdrER算法：扩展解析在模型检查中的高效应用

1. PdrER算法核心原理与技术突破1.1 传统PDR算法的局限性分析Property Directed Reachability&#xff08;PDR&#xff0c;也称为IC3&#xff09;是当前最先进的模型检查算法之一&#xff0c;广泛应用于硬件和软件系统的安全属性验证。该算法通过构建归纳不变量&#xff08;ind…...

编程新知 2026/5/23 6:14:23

从零构建工业级垃圾邮件分类器：端到端实战指南

1. 项目概述&#xff1a;从零构建一个真正能用的垃圾邮件分类器你打开邮箱&#xff0c;每天收到几十封邮件&#xff0c;其中总混着几封标题耸动、内容空洞、发件人可疑的“优惠券”“中奖通知”“账户异常提醒”——它们不是广告&#xff0c;而是典型的垃圾邮件&#xff08;Spa…...

编程新知 2026/5/23 5:56:45

MakeMeAHanzi完整指南：如何免费获取9000+汉字笔画动画数据

MakeMeAHanzi完整指南&#xff1a;如何免费获取9000汉字笔画动画数据 【免费下载链接】makemeahanzi Free, open-source Chinese character data 项目地址: https://gitcode.com/gh_mirrors/ma/makemeahanzi MakeMeAHanzi是一个免费开源的汉字数据项目&#xff0c;为开发…...

编程新知 2026/5/23 5:01:57

JEECG AI应用平台深度解析：业内唯一 JAVA 版开源 AI 应用平台，如何成为企业级 Dify 替代方案

JeecgBoot AI专题研究 | JEECG AI应用平台的能力全景、对比 Dify 的差异化优势与企业落地实践 为什么企业需要一个「长在业务里」的 AI 应用平台 过去两年&#xff0c;几乎每家公司都在尝试把大模型接进自己的系统。最常见的路径是搭一套 Dify、FastGPT 之类的 LLM 应用平台&a…...

编程新知 2026/5/23 3:50:29

用高效证书管理加固企业数字边界

在当今企业 IT 基础架构的运行中&#xff0c;数字证书已经成为不可或缺的重要组成部分。这在很大程度上源于企业逐渐将 HTTPS 作为默认的数据传输方式&#xff0c;以实现更加安全的通信环境。从安全与隐私角度来看&#xff0c;这无疑是一项积极的改变&#xff0c;因为数据在传输…...

编程新知 2026/5/23 1:46:19

【案例共创】CodeArts+SKILL 双引擎：AI 驱动 WEB 服务器极速部署

本案例由开发者&#xff1a;JeffDing提供&#xff0c;华为开发者空间案例中心优化并收录。 最新案例动态&#xff0c;请查阅【案例共创】CodeArtsSKILL 双引擎&#xff1a;AI 驱动 WEB 服务器极速部署小伙伴们快来进行实操吧&#xff01; 一、概述 1.1 案例介绍 华为云码道…...

编程新知 2026/5/22 23:18:06