参考文章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>
js
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
js// 需用户手动触发全屏操作的交互对象 <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官方报告该问题，以便他们修复或提供解决方案。
我遇到的问题，使用第3条能够解决。
