这篇博客介绍了如何使用原生JavaScript解决浏览器兼容性问题来实现全屏功能，同时也提到了使用screenfull.js插件进行简化操作的方法。在详细讲解代码实现过程中，强调了全屏API的调用细节和注意事项，包括exitFullscreen、webkitCancelFullScreen等方法。此外，还提醒了在Vue项目中如何引入并使用screenfull.js插件。
使用原生js实现全屏screen() {
let element = document.documentElement;
if (this.fullscreen) {
if (document.exitFullscreen) {
document.exitFullscreen();
} else if (document.webkitCancelFullScreen) {
document.webkitCancelFullScreen();
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if (document.msExitFullscreen) {
document.msExitFullscreen();
}
} else {
if (element.requestFullscreen) {
element.requestFullscreen();
} else if (element.webkitRequestFullScreen) {
element.webkitRequestFullScreen();
} else if (element.mozRequestFullScreen) {
element.mozRequestFullScreen();
} else if (element.msRequestFullscreen) {
// IE11
element.msRequestFullscreen();
}
}
this.fullscreen = !this.fullscreen;
},
原生js实现起来比较复杂，考虑到各种浏览器的兼容性问题
还有另外一种较为方便的方法npm i --save screenfull
在vue项目中引入插件import screenfull from "screenfull"
screen() {
// 如果不允许进入全屏，发出不允许提示
if (!screenfull.enabled) {
this.$message("您的浏览器不能全屏");
return false;
}
screenfull.toggle();
},
3757
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
