前端全屏方法封装

一、引言

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

效果图

二、拿取兼容方法

对于全屏在项目中使用来说，需要的需求功能大致就是，可以针对某个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) };`

这样就完成啦🎉🎉🎉