前端实现指定dom容器全屏效果

今天也是爱大大的一天吖

于 2025-01-07 11:36:43 发布

阅读量1.1k

点赞数 13

文章标签：前端

本文链接：https://blog.youkuaiyun.com/qq_45560350/article/details/144980209

版权

参考文章1
参考文章2
参考文档
 参考文章3

一、实现场景

在这里插入图片描述
业务需求，开发地图工具栏，其中有个’全屏’功能

二、实现方法1：dom元素原生API实现

html

// 需用户手动触发全屏操作的交互对象
<div class="tool-item" @click="clickIcon" ref="toolItem">
  <i class="icon-label"></i> // ICON图标
  <span>全屏</span> // 文字说明
</div>

// 需要被全屏的dom
<div class="need-full-screen"></div>

methods: {
    clickIcon() {
      //指定全屏元素
      const element = document.getElementsByClassName("need-full-screen")[0];
      // 判断浏览器是否处于全屏状态
      const isFull = this.checkFull();
       if(isFull){
        this.exitFullscreen();
       }else{
        this.launchIntoFullscreen(element);
       }
    },
	
    //全屏封装
    launchIntoFullscreen(element) {
      if (element.requestFullscreen) {
        element.requestFullscreen()
      } else if (element.mozRequestFullScreen) {
        element.mozRequestFullScreen()
      } else if (element.webkitRequestFullscreen) {
        element.webkitRequestFullscreen()
      } else if (element.msRequestFullscreen) {
        element.msRequestFullscreen()
      } else {
        this.$message.info('当前浏览器不支持全屏操作')
      }
    },
    
    //退出全屏封装
    exitFullscreen() {
      if (document.exitFullscreen) {
        document.exitFullscreen()
      } else if (document.mozCancelFullScreen) {
        document.mozCancelFullScreen()
      } else if (document.webkitExitFullscreen) {
        document.webkitExitFullscreen()
      } else {
        this.$message.info('当前浏览器不支持全屏操作')
      }
    },
    
    // 判断是否全屏
    checkFull(){
      //判断浏览器是否处于全屏状态 （需要考虑兼容问题）
      //火狐浏览器
      let isFull = document.mozFullScreen||
        document.fullScreen ||
        //谷歌浏览器及Webkit内核浏览器
        document.webkitIsFullScreen ||
        document.webkitRequestFullScreen ||
        document.mozRequestFullScreen ||
        document.msFullscreenEnabled;
      if(isFull === undefined) {
        isFull = false
      }
      return isFull;
    },
}

使用原生API需关注不同浏览器的兼容情况

三、实现方法2：screenfull依赖实现

安装
npm install screenfull
引入
import screenfull from 'screenfull';

使用
html

// 需用户手动触发全屏操作的交互对象
<div class="tool-item" @click="clickIcon" ref="toolItem">
  <i class="icon-label"></i> // ICON图标
  <span>全屏</span> // 文字说明
</div>

// 需要被全屏的dom
<div class="need-full-screen"></div>

methods: {
	clickIcon(){
		if(!screenfull.isEnabled){
			console.warn('不支持全屏模式！');
			return;
		}
		//指定全屏元素
		const element = document.getElementsByClassName("need-full-screen")[0];
		// 切换全屏模式的状态
		screenfull.toggle(element); 
	}
}

API参考：

screenfull.isEnabled：布尔值，表示全屏模式是否被支持。
screenfull.isFullscreen：布尔值，表示当前是否处于全屏模式。
screenfull.request(element[, fullscreenOptions])：请求全屏模式。参数 element 是要全屏的 DOM 元素。如果省略，默认<html>，将全屏整个文档。
screenfull.exit()：退出全屏模式。
screenfull.on(event, handler)：监听事件。常用事件是 change，它在全屏模式发生变化时触发。
screenfull.toggle(element[, fullscreenOptions])：切换全屏模式的状态。如果当前页面处于全屏模式，调用此方法将退出全屏；如果当前页面不在全屏模式，则将进入全屏。
screemfull.on(eventType, handler)：
- 事件类型：字符串，如 ‘change’ 或 ‘error’。
- 回调函数：事件触发时执行的函数。
  
  注意事项
  确保在使用 screenfull.on() 之前 screenfull 已经正确加载。
  事件回调函数可以用来更新 UI、处理错误或执行其他相关操作。
screenfull.off(eventType,handler)：用于移除之前通过 screenfull.on() 注册的事件监听器。这使得你可以取消对全屏模式事件的监听，避免不必要的回调执行。
- 事件类型：字符串，如 ‘change’ 或 ‘error’。
- 回调函数：之前注册的事件处理函数。
  
  注意事项
  确保在调用 screenfull.off() 时，事件类型和回调函数与之前注册的一致。
  使用 screenfull.off() 有助于管理事件监听器，特别是当你不再需要特定的事件处理时。

`screenfull.toggle()` 与 `screenfull.request(element)`的区别：

screenfull.request(element) 主要用于进入全屏模式，可以指定要全屏的元素或默认全屏整个文档。
screenfull.toggle() 主要用于切换全屏模式，它根据当前全屏状态自动决定是进入还是退出全屏。

使用场景

使用 screenfull.request() 当你需要主动请求进入全屏模式时，尤其是在用户点击某个按钮时。
使用 screenfull.toggle() 当你希望切换全屏状态时，无论当前是进入还是退出全屏模式，适合用于开关按钮。

四、全屏请求无效，控制台报错权限问题解决方法

JavaScript全屏请求在Chrome中被拒绝是由于浏览器的安全策略所导致的。为了保护用户的隐私和安全，浏览器限制了一些敏感操作，如全屏请求。

全屏请求是指通过JavaScript代码将网页切换到全屏模式。在Chrome浏览器中，全屏请求必须在用户的交互行为触发下才能成功执行，例如点击按钮或链接。这是为了防止恶意网站滥用全屏模式，欺骗用户或干扰用户体验。

如果JavaScript全屏请求在Chrome中被拒绝，可以尝试以下解决方法：

确保全屏请求是在用户的交互行为触发下执行的，例如在点击事件的回调函数中执行全屏请求代码。
检查浏览器版本，确保使用的是最新版本的Chrome浏览器。有时候旧版本的浏览器可能存在一些安全漏洞或限制。
检查浏览器设置，确保没有启用任何安全插件或扩展程序，这些插件可能会干扰全屏请求。
如果全屏请求涉及到嵌入的iframe或跨域请求，需要确保目标网页也允许全屏请求，并且设置了正确的CORS（跨域资源共享）头部。

（图片取自置顶处参考文档中）
如果以上方法都无效，可以考虑使用其他浏览器进行测试，或者向Chrome官方报告该问题，以便他们修复或提供解决方案。