前端全屏方法封装

一、引言

全屏功能在很多项目中会使用到，例如弹框全屏预览、附件预览区域全屏等场景。接下来我们对全屏的开启、关闭以及是否在全屏中等方法进行简单封装。

效果图

二、拿取兼容方法

对于全屏在项目中使用来说，需要的需求功能大致就是，可以针对某个DOM元素去全屏，而不是针对整个可视区域去全屏。再则就是全屏和取消全屏即可。对于现在写文章来说，一大部分信息来源，都是来自AI啦。对于一些基础都熟悉的东西，直接拿过来使用即可。所以向gpt问一下。全屏中我们要的基础信息。我们的目的的整合和封装🍺🍺

1.requestFullscreen兼容写法

scss 复制代码

// 获取元素
var element = document.getElementById('your-element');

// 尝试使用标准的 requestFullscreen 方法
if (element.requestFullscreen) {
  element.requestFullscreen();
} 
// 兼容 Webkit
else if (element.webkitRequestFullscreen) {
  element.webkitRequestFullscreen();
} 
// 兼容 Moz
else if (element.mozRequestFullScreen) {
  element.mozRequestFullScreen();
} 
// 兼容 IE
else if (element.msRequestFullscreen) {
  element.msRequestFullscreen();
}

2.js结束当前浏览器全屏，需要兼容主流浏览器

javascript 复制代码

// 退出全屏的函数
function exitFullScreen() {
  if (document.exitFullscreen) {
    document.exitFullscreen();
  } 
  // 兼容 Webkit
  else if (document.webkitExitFullscreen) {
    document.webkitExitFullscreen();
  } 
  // 兼容 Moz
  else if (document.mozCancelFullScreen) {
    document.mozCancelFullScreen();
  } 
  // 兼容 IE
  else if (document.msExitFullscreen) {
    document.msExitFullscreen();
  }
}
// 示例用法
exitFullScreen();

3.js 判断当前浏览器是否正在全屏中，需要兼容主流浏览器

javascript 复制代码

// 判断是否处于全屏状态的函数
function isFullScreen() {
  return (
    document.fullscreenElement ||
    document.webkitFullscreenElement ||
    document.mozFullScreenElement ||
    document.msFullscreenElement
  );
}

// 示例用法
if (isFullScreen()) {
  console.log("当前浏览器处于全屏状态");
} else {
  console.log("当前浏览器不处于全屏状态");
}

三、代码封装

这些代码，看着就挺难受了，差不多像屎山啦。我们来简单封装一下。对于这种if else一般解决的方案都是用Map或者数组来。

我们把三种情况下的方法用数组装起来。

ini 复制代码

//   打开全屏兼容判断
const openNames = [
"requestFullscreen", 
"webkitRequestFullscreen", 
"mozRequestFullScreen", 
"msRequestFullscreen"
];
//   取消全屏兼容判断
const exitNames = [
"exitFullscreen", 
"webkitExitFullscreen", 
"mozCancelFullScreen", 
"msExitFullscreen"
];
//   是否在全屏中兼容判断
const isRunNames = [
"fullscreenElement", 
"webkitFullscreenElement", 
"mozFullScreenElement", 
"msFullscreenElement"
];

从上面可以发现，如果对应的元素上有这个属性，就可以执行就行。所以我们写一个公共的在对应的对象上面找是否有这个属性方法。

javascript 复制代码

//   在对象中是否存在对应属性
const getPropertyName = (names, target) => {
  return names.find((name) => name in target);
};

到了这里，那想要执行全屏和取消全屏，判断全屏的都简单了。

3.1开启全屏

scss 复制代码

//   查看当前可以全屏的函数名
const getFullScreenName = () => {
  return getPropertyName(openNames, document.documentElement)
}

// 开启全屏
const fullStart = (ele) => {
  getFullScreenName() && ele[getFullScreenName()]();
};

3.2判断当前浏览器是否处于全屏中

javascript 复制代码

//   查看当前正在全屏中的函数名
const runFullScreenName = () => {
  return getPropertyName(isRunNames, document)
}

// 判断当前浏览器是否处于全屏中
const isFullScreen = () => {
  const status = document[runFullScreenName()] || null
  return !!status
}

3.3结束全屏

scss 复制代码

//   查看当前可以取消全屏的函数名
const exitFullScreenName = () => {
  return getPropertyName(exitNames, document)
}

// 结束全屏
const exitFullScreen = () => {
  exitFullScreenName() && document[exitFullScreenName()]();
}

四、使用

所以，只需要判断当前全屏状态，来开启和关闭。

ini 复制代码

const btn = document.querySelector(".btn");
const p = document.querySelector(".fullDom");
btn.onclick = function () {
  isFullScreen() ? exitFullScreen() : fullStart(p)
};

这样就完成啦🎉🎉🎉