当前位置：网站首页>封装class类一次性解决全屏问题
封装class类一次性解决全屏问题
2022-08-02 06:19:00 【影风莫】
前言
这里先给项目地址：地址
支持全屏的api
- 浏览器是否支持全屏模式：
document.fullscreenEnabled - 使元素进入全屏模式：
Element.requestFullscreen() - 退出全屏：
document.exitFullscreen() - 检查当前是否有节点处于全屏状态：
document.fullscreenElement - 进入全屏/离开全屏，触发事件：
document.fullscreenchange - 无法进入全屏时触发:
document.fullscreenerror
浏览器前缀：
目前并不是所有的浏览器都实现了API的无前缀版本，所以我们需要针对不同浏览器，做一下API的兼容:
我们需要写成类的形式：
/** * @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) {
if (fn !== undefined) fn(); // 执行不支持全屏的回调
this.isFullscreenData = false;
}
}
1. 浏览器是否支持全屏模式：document.fullscreenEnabled
document.fullscreenEnabled属性返回一个布尔值，表示当前文档是否可以切换到全屏状态。
2. 使元素进入全屏模式：Element.requestFullscreen()
/** * @description: 将传进来的元素全屏 * @param {String} domName 要全屏的dom名称 */
Fullscreen(domName) {
const element = document.querySelector(domName); // 获取dom
const methodName =
this.prefixName === ''
? 'requestFullscreen'
: `${
this.prefixName}RequestFullScreen`; // API前缀
element[methodName](); // 调用全屏
}
3. 退出全屏：document.exitFullscreen()
exitFullscreen() {
const methodName =
this.prefixName === ''
? 'exitFullscreen'
: `${
this.prefixName}ExitFullscreen`; // API 前缀
document[methodName](); // 调用
}
4. 检查当前是否有节点处于全屏状态：document.fullscreenElement
/** * @description: 检测有没有元素处于全屏状态 * @return 布尔值 */
isElementFullScreen() {
const fullscreenElement =
document.fullscreenElement ||
document.msFullscreenElement ||
document.mozFullScreenElement ||
document.webkitFullscreenElement; // 有前缀的f是大写，没前缀是小写
if (fullscreenElement === null) {
return false; // 当前没有元素在全屏状态
} else {
return true; // 有元素在全屏状态
}
}
事实上，还有一个属性document.fullscreen，返回一个布尔值，表示文档是否处于全屏模式。
两个方法效果是一样，但因为IE不支持这个属性，所以这里用的是document.fullscreenElement.
5. 进入全屏/离开全屏，触发事件：document.fullscreenchange
当我们进入全屏和离开全屏的时候，都会触发一个fullscreenchange事件。
注意：此事件不会提供任何信息，表明是进入全屏或退出全屏。
/** * @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); // 离开全屏的回调
}
};
}
注意：多层全屏的情况
- 先进入左边全屏(进入全屏回调)，再进入红色全屏(进入全屏回调)
- 退出全屏,此时退出红色全屏，左边仍是全屏(触发进入全屏回调)
- 出现这种情况，可以在点击按钮的时候，做一些状态限制。或者根据全屏事件返回的dom信息来进行判断。
6. 无法进入全屏时触发: document.fullscreenerror
比如全屏请求不是在事件处理函数中调用,会在这里拦截到错误:
/** * @description: 浏览器无法进入全屏时触发 * @param {Function} enterErrorFn 回调 */
screenError(enterErrorFn) {
const methodName = `on${
this.prefixName}fullscreenerror`;
document[methodName] = e => {
enterErrorFn && enterErrorFn(e)
};
}
Css： 全屏模式下的样式
- 默认设置黑色背景
:not(:root):-webkit-full-screen::backdrop {
position: fixed;
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
background: black; // 会将背景设为黑色的 如果你没为你的dom设置背景的话，全屏下会为黑色
}
- 默认样式：
:not(:root):-webkit-full-screen {
object-fit: contain;
position: fixed !important;
top: 0px !important;
right: 0px !important;
bottom: 0px !important;
left: 0px !important;
box-sizing: border-box !important;
min-width: 0px !important;
max-width: none !important;
min-height: 0px !important;
max-height: none !important;
width: 100% !important;
height: 100% !important;
transform: none !important;
margin: 0px !important;
}
全屏状态的CSS：
全屏状态下，大多数浏览器的CSS支持:full-screen伪类，只有IE11支持:fullscreen伪类。使用这个伪类，可以对全屏状态设置单独的CSS属性。
/* 针对dom的全屏设置 */
.div:-webkit-full-screen {
background: #fff;
}
/* 全屏属性 */
:-webkit-full-screen {
}
:-moz-full-screen {
}
:-ms-fullscreen {
}
/* 全屏伪类 当前chrome:70 不支持 */
:full-screen {
}
:fullscreen {
/* IE11支持 */
}
参考资料：阮一峰老师的Fullscreen API：全屏操作
这里是一条华丽的分割线，讲完原理开始实战
项目的html
index.html：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="./index.css" />
<title>Document</title>
</head>
<body>
<iframe src="https://codesandbox.io/s/" id="iframe-one" name="iframe-one width=" 100%" height="200" scrolling="no" frameborder="0"></iframe>
<img src="vscode.svg" onclick="iframeScreen()" id="vscode" width="100" height="100" alt="">
<script src="./index.js"></script>
</body>
</html>
项目中的css
index.css：
#iframe-one {
// 随便是什么元素，一开始不展示元素
display: none;
}
/* 针对dom的全屏设置 */
.left:-webkit-full-screen {
background: #fff;
}
/* 全屏属性 */
:-webkit-full-screen {
}
:-moz-full-screen {
}
:-ms-fullscreen {
}
/* 全屏伪类 当前chrome:70 不支持 */
:full-screen {
}
:fullscreen {
/* IE11支持 */
}
封装完成的js文件
以后无论遇到什么全屏问题都可以用改封装得class
index.js：
class fullScreen {
constructor(fn) {
// fn是失败的回调函数
this.prefixName = ''; // 浏览器前缀
this.isFullscreenData = true; // 浏览器支持全屏
this.isFullscreen(fn);
}
/** * @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) {
if (fn !== undefined) fn(); // 执行不支持全屏的回调
this.isFullscreenData = false;
}
}
/** * @description: 将传进来的元素全屏 * @param {String} domName 要全屏的dom名称 */
Fullscreen(element) {
const methodName =
this.prefixName === ''
? 'requestFullscreen'
: `${
this.prefixName}RequestFullScreen`; // API前缀
element[methodName](); // 调用全屏
}
// 退出全屏
exitFullscreen() {
const methodName =
this.prefixName === ''
? 'exitFullscreen'
: `${
this.prefixName}ExitFullscreen`; // API 前缀
document[methodName](); // 调用
}
/** * @description: 检测有没有元素处于全屏状态 * @return 布尔值 */
isElementFullScreen() {
const fullscreenElement =
document.fullscreenElement ||
document.msFullscreenElement ||
document.mozFullScreenElement ||
document.webkitFullscreenElement; // 有前缀的f是大写，没前缀是小写
if (fullscreenElement === null) {
return false; // 当前没有元素在全屏状态
} else {
return true; // 有元素在全屏状态
}
}
/** * @description: 监听进入/离开全屏 * @param {Function} enter 进入全屏的回调 * @param {Function} quit 离开全屏的回调 */
screenChange(enter, quit) {
if (!this.isFullscreenData) return;
const methodName = `on${
this.prefixName}fullscreenchange`;
document[methodName] = (e) => {
console.log(e);
if (this.isElementFullScreen()) {
enter && enter(); // 进入全屏回调
} else {
quit && quit(); // 离开全屏的回调
}
};
}
/** * @description: 浏览器无法进入全屏时触发 * @param {Function} enterErrorFn 回调 */
screenError(enterErrorFn) {
const methodName = `on${
this.prefixName}fullscreenerror`;
document[methodName] = (e) => {
enterErrorFn && enterErrorFn(e);
};
}
}
对元素一开始显示或者隐藏处理
这里可以这样处理调用screenChange方法，里面执行进入屏幕的回调和离开屏幕的回调，既进入显示，离开隐藏
index.js：
let full = new fullScreen(() => {
console.log('不支持');
});
const iframe = {
enter: function (element) {
// 显示
element.style.display = 'block';
},
quit: function (element) {
// 隐藏
element.style.display = 'none';
},
};
function iframeScreen() {
const element = document.querySelector('#iframe-one');
full.Fullscreen(element);
full.screenChange(
() => iframe.enter(element),
() => iframe.quit(element)
);
}
边栏推荐
- Project development specification
- The stock price has repeatedly hit new lows, and the real estate SaaS giant is in trouble. How should Mingyuan Cloud transform and save itself?
- DNS resolution process
- MySQL (3)
- MySQL Advanced Statements (1)
- 解决Pytorch模型在Gunicorn部署无法运行或者超时问题
- CAT1 4G+Ethernet development board Tencent cloud mobile phone WeChat applet display temperature and delivery control
- 推出 Space On-Premises (本地部署版) Beta 版！
- （部分不懂，笔记整理未完成）【图论】差分约束
- MySql 5.7.38下载安装教程 ,并实现在Navicat操作MySql
猜你喜欢
How does abaqus quickly import the assembly of other cae files?
MySQL 5.7 安装教程（全步骤、保姆级教程）
MySQL classic 50 practice questions and the most detailed analysis of the whole network
The second day HCIP
About the local server problem after ue4.27 pixel streaming package
![[Dataset][VOC] Male and female dataset voc format 6188 sheets](/img/72/d3e46a820796a48b458cd2d0a18f8f.png)
[Dataset][VOC] Male and female dataset voc format 6188 sheets
aTrust项目的相关操作与分享
武汉高性能计算大会2022举办，高性能计算生态发展再添新动力
Reverse resolve dns server
Go inside the basic knowledge
随机推荐
Specified URL is not reachable,caused by :‘Read timed out
堡垒机、堡垒机的原理
宝塔+FastAdmin 404 Not Found
System.Security.SecurityException: 未找到源，但未能搜索某些或全部事件日志。不可 访问的日志: Security
解决C＃非静态字段、方法或属性“islandnum.Program.getIslandCount(int[][], int, int)”要求对象引用
CAT1 4G+Ethernet development board Tencent cloud mobile phone WeChat applet display temperature and delivery control
交换部分 VLAN
The second day HCIP
The nacos source code can not find the istio package
optional
Dataset: A detailed guide to the download link collection of commonly used datasets in machine learning
Servlet
两篇不错的php debug教程
PHP Warning: putenv() has been disabled for security reasons in phar
Unity Shader学习（七）纹理图像的简单使用
提交代码流程
MySQL Advanced SQL Statements (2)
In-depth analysis of the initialization of member variables and local variables
Understand C operators in one article
Two good php debug tutorials