背景
在项目中出现了一个需求，需要实现将页面投屏到屏幕上，并能够进行开启全屏和退出全屏的操作。
尽管网上有许多第三方开源库可供使用，但由于后续业务场景的不确定性，修改源代码可能带来较大的成本和风险。鉴于全屏功能的实现并不复杂，因此我自己封装了一个解决方案。
现在，我将这个自封装的代码分享给大家，可以直接拷贝并使用。
废话不多说，直接上代码
html
<div id="root" style="width: 200px;height: 200px;background-color: gray;">
全屏操作
<button id="openScreen">开启全屏</button>
<button id="closeScreen">退出全屏</button>
</div>
js
function ScreenFull(id) {
this.status = false;
this.el = document.getElementById(id);
}
ScreenFull.prototype.open = function(cb) {
this.status = false;
this.fullScreen();
cb(this.status)
}
ScreenFull.prototype.close = function(cb) {
var _this = this;
_this.status = true;
_this.fullScreen();
cb(this.status)
}
ScreenFull.prototype.fullScreen = function() {
if (this.status) {
if (document.exitFullscreen) {
document.exitFullscreen();
} else if (document.webkitCancelFullScreen) {
//Chrome等
document.webkitCancelFullScreen();
} else if (document.mozCancelFullScreen) {
//FireFox
document.mozCancelFullScreen();
} else if (document.msExitFullscreen) {
// IE11
document.msExitFullscreen();
}
} else {
if (this.el.requestFullscreen) {
this.el.requestFullscreen();
} else if (this.el.webkitRequestFullScreen) {
//Chrome等
this.el.webkitRequestFullScreen();
} else if (this.el.mozRequestFullScreen) {
//FireFox
this.el.mozRequestFullScreen();
} else if (this.el.msRequestFullscreen) {
// IE11
this.el.msRequestFullscreen();
}
}
this.status = !this.status;
}
var screenFull = new ScreenFull("root");
var openScreen = document.getElementById("openScreen");
// 开启全屏
openScreen.addEventListener('click', function(){
screenFull.open(function(status) {
console.log('openScreen status', status)
});
})
var closeScreen = document.getElementById("closeScreen");
// 退出全屏
closeScreen.addEventListener('click', function(){
screenFull.close(function(status) {
console.log('closeScreen status', status)
});
})
结语
感谢您的阅读！希望本文带给您有价值的信息。
如果对您有帮助，请「点赞」支持，并「关注」我的主页获取更多后续相关文章。同时，也欢迎「收藏」本文，方便以后查阅。
写作不易，我会继续努力，提供有意义的内容。感谢您的支持和关注！
