将某一个 DIV 块全屏展示
文章目录
- 需求
- 分析
需求
上节我们研究了如何将页面中的指定 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 下载为图片：跳转查看 本节演技一下如何将 DIV 全屏展示 全屏展示某一个 DIV 分析 其实就是模拟键盘动作 F11 var element document.getElementById(pic) var requestMethod element.requestFullS…...
K8S集群再搭建
前述：总体是非常简单的，就是过程繁琐，不过都是些重复的操作 master成员: [controller-manager, scheduler, api-server, etcd, proxy,kubelet] node成员: [kubelet, proxy] master要修改的配置文件有 1. vi /etc/etcd/etcd.conf # 数…...
工具-博客搭建
以下相关讲解均基于hexo github pages方案，请注意！！！博客搭建方案选择 参考文章1 搭建教程 参考文章1 hexo github pages搭建过程中遇到的问题 删除categories、tags 1、删除含有需要删除categories、tags的文章 2、hexo …...
贪心算法：合并区间
参考资料：代码随想录 题目链接：. - 力扣（LeetCode） 做过用最少数量的箭引爆气球和无重叠区间这两道题目后，题意和题解都不难理解。唯一的一点儿难点是对于api的运用。 class Solution {public int[][] merge(int[][…...
DFA 算法
为什么要学习这个算法 前一段时间遇到了瓶颈，因为词库太多了导致会有一些速度过慢，而且一个正则表达式已经放不下了，需要进行拆分正则才可以。 正好我以前看过有关 dfa 的介绍，但是并没有深入的进行研究，所以就趁着周…...
Web（数字媒体）期末作业
一.前言 1.本资源为类似于打飞机的网页游戏 2.链接如下：【免费】前端web或者数字媒体的期末作业（类似于打飞机的2D网页小游戏）资源-CSDN文库 二.介绍文档...
展现金融科技前沿力量，ATFX于哥伦比亚金融博览会绽放光彩
不到半个月的时间里，高光时刻再度降临ATFX。而这一次，是ATFX不曾拥有的桂冠—“全球最佳在线经纪商”(Best Global Online Broker)。2024年5月15日至16日，拉丁美洲首屈一指的金融盛会—2024年哥伦比亚金融博览会(Money Expo Colombia 2024) 于…...
、元素rem实现自适应)
html 根字号 以及 设置根元素font-size:calc(100vw/18.75)、元素rem实现自适应
rem 单位介绍：rem 是相对文档根元素(html)字体大小的尺寸单位，当元素的尺寸或文字字号等使用 rem 单位时，会随着根元素的 font-size变化而变化。 得出结论：在不同分辨率的设备下动态设置根元素的字体大小就可以实现页面自适应。 …...
size_t无符号数相关知识点
size_t无符号数相关知识点 在代码编译的时候，报错一个warning： comparison between signed and unsigned interger expression [-wsign-compare] 找到代码，告警这一段代码 size_t count timeProtocol.m_intersectionArray.size(); for (u…...
深度学习之基于Tensorflow+Flask框架Web手写数字识别
欢迎大家点赞、收藏、关注、评论啦 ，由于篇幅有限，只展示了部分核心代码。 文章目录 一项目简介 二、功能三、系统四. 总结 一项目简介 一、项目背景与意义 手写数字识别是深度学习领域中的一个经典问题，也是计算机视觉领域的重要应用之一。…...
2024电工杯B题食谱评价与优化模型思路代码论文分析
2024年电工杯数学建模竞赛B题论文和代码已完成，代码为B题全部问题的代码，论文包括摘要、问题重述、问题分析、模型假设、符号说明、模型的建立和求解（问题1模型的建立和求解、问题2模型的建立和求解、问题3模型的建立和求解）、模型…...
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三维模型，需要用到cats-blender-plugin-0-19-0插件。 一…...
[源码+搭建教程]西游伏妖篇手游_GM_单机+和朋友玩
为了学习和研究软件内含的设计思想和原理，本人花心血和汗水带来了搭建教程！！！ 教程不适于服架设，严禁服架设！！！请牢记！！！ 教程仅限学习使用&…...
windows、mac、linux中node版本的切换(nvm管理工具)，解决项目兼容问题 node版本管理、国内npm源镜像切换
文章目录 在工作中，我们可能同时在进行2个或者多个不同的项目开发，每个项目的需求不同，进而不同项目必须依赖不同版本的NodeJS运行环境，这种情况下，对于维护多个版本的node将会是一件非常麻烦的事情，nvm就是…...
【MySQL精通之路】全文搜索-布尔型全文搜索
1.使用方法 MySQL可以使用IN BOOLEAN MODE修饰符执行布尔全文搜索。 使用此修饰符，某些字符在搜索字符串中单词的开头或结尾具有特殊含义。 在下面的查询中，和-运算符分别表示单词必须存在或不存在，才能进行匹配。 因此，查询检…...
【学习笔记】C++每日一记[20240520]
简述几种内存泄漏的预防机制 用智能指针代替普通指针，由于智能指针自带引用计数功能，能够记录动态分配空间的引用数量，在引用计数为零时，自动调用析构函数释放空间。 借助一些内存泄漏检测工具，例如Valgrind、Memche…...
【热门话题】一文带你读懂公司是如何知道张三在脉脉上发了“一句话”的
按理说呢，A公司和脉脉属于不同的平台，而且脉脉上大家可以匿名发言，所以，即便我坐在你边上，我发了一句话上去，你也不知道是谁发的。但通过一些技术，我们却可以分析出，公司是如何知道张…...
linux命令日常使用思考
linux命令日常使用思考 复制的相关问题scp和cp的区别root192.168.5.229-r的理解 更新版本的相关问题svn info 根目录和家目录的区别根目录家目录 复制的相关问题 scp和cp的区别 安全性：SCP 是基于 SSH 的加密传输协议，可以保证数据在传输过程中的安全性…...
同余定理与哈希函数
目录 同余定理哈希函数加密算法 余数有很多的应⽤场景，⽐如散列函数、加密算法，循环冗余校验等等。生活中也有很多与余数有关的例子。 比如，你要将1147条数据分页写入，每页10条，计算总页数。就可以用1147除以10&#x…...
03-01-Vue组件的定义和注册
前言 我们接着上一篇文章02-Vue实例的生命周期函数 来讲。 下一篇文章 03-02-Vue组件之间的传值 什么是组件 组件： 组件的出现，就是为了拆分Vue实例的代码量的，能够让我们以不同的组件，来划分不同的功能模块，将来我们…...
别再只当‘信号合并器’了！Bias Tee在5G小基站和毫米波测试中的实战避坑指南
5G时代Bias Tee实战指南：从小基站到毫米波的关键应用与避坑策略 在5G硬件研发的前沿战场上，Bias Tee这个看似简单的三端口器件正扮演着越来越关键的角色。不同于传统认知中的"信号合并器"，现代5G系统对Bias Tee提出了前所未有的性能…...
:当你的CAD代码变得“又大又乱”：从手动编译到CMake，从随性编码到单元测试)))
OpenGL渲染与几何内核那点事-项目实践理论补充(三-1-(2):当你的CAD代码变得“又大又乱”：从手动编译到CMake，从随性编码到单元测试))
TOC 代码仓库入口： github源码地址。gitee源码地址。 系列文章规划： …见内容管理OpenGL渲染与几何内核那点事-项目实践理论补充(一-1-(8)-番外篇：当你的 CAD 遇上“活”的零件)OpenGL渲染与几何内核那点事-项目实践理论补充(一-2-(1)-当你…...
VLCD车载LCD驱动框架：确定性刷新与跨SoC移植实践
1. VLCD库概述：面向CARIAD车载信息娱乐系统的TFT-LCD底层驱动框架VLCD（Virtual LCD）是一个专为大众集团CARIAD软件平台定制的轻量级、可移植TFT-LCD显示驱动抽象层。它并非通用图形库，而是聚焦于车载HMI（人机交互&…...
Go语言的Context上下文管理
Go语言的Context上下文管理 Context的概念 Context（上下文）是Go语言中一个非常重要的包，它提供了一种在goroutine之间传递请求范围的值、取消信号和截止时间的方法。Context在处理HTTP请求、数据库操作、RPC调用等场景中非常有用。 Context的…...
AWS容器扩展性终极指南：如何构建可伸缩的容器化应用
AWS容器扩展性终极指南：如何构建可伸缩的容器化应用 【免费下载链接】containers-roadmap This is the public roadmap for AWS container services (ECS, ECR, Fargate, and EKS). 项目地址: https://gitcode.com/gh_mirrors/co/containers-roadmap 在当今…...
Fay数字人语音识别模型评估指标：如何选择最佳ASR方案
Fay数字人语音识别模型评估指标：如何选择最佳ASR方案 【免费下载链接】Fay fay是一个帮助数字人（2.5d、3d、移动、pc、网页）或大语言模型（openai兼容、deepseek）连通业务系统的agent框架。 项目地址: https://gitcod…...
深入解析MiniAGI：如何用GPT-4构建自主决策智能体系统
深入解析MiniAGI：如何用GPT-4构建自主决策智能体系统 【免费下载链接】mini-agi MiniAGI is a minimal general-purpose autonomous agent based on GPT-3.5 / GPT-4. Can analyze stock prices, perform network security tests, create art, and order pizza. 项…...
让魔兽争霸3重获新生：从卡顿到丝滑的180帧魔法之旅
让魔兽争霸3重获新生：从卡顿到丝滑的180帧魔法之旅 【免费下载链接】WarcraftHelper Warcraft III Helper , support 1.20e, 1.24e, 1.26a, 1.27a, 1.27b 项目地址: https://gitcode.com/gh_mirrors/wa/WarcraftHelper 还在为魔兽争霸3的卡顿问题头疼吗&…...
python random
# Python 的 random 模块：不只是“随机”那么简单 很多人第一次接触 Python 的 random 模块，大概都是在写猜数字游戏的时候。输入几行代码，屏幕上跳出一个随机数，感觉像是给程序注入了某种“不确定的灵魂”。但如果你认为 random …...
网站SEO优化的成本是多少_如何合理控制
网站SEO优化的成本是多少?如何合理控制 问题分析：SEO优化的成本背后 随着互联网的迅猛发展，网站SEO优化成为提升网站流量、增加品牌知名度和实现商业目标的关键手段。网站SEO优化的成本究竟是多少呢？这不仅仅涉及到人力、时间和技术投入&a…...