厦门正规网站建设公司,wordpress+手册主题,单页关键字优化,大学校园网络设计方案背景
在项目中出现了一个需求#xff0c;需要实现将页面投屏到屏幕上#xff0c;并能够进行开启全屏和退出全屏的操作。
尽管网上有许多第三方开源库可供使用#xff0c;但由于后续业务场景的不确定性#xff0c;修改源代码可能带来较大的成本和风险。鉴于全屏功能的实现…背景
在项目中出现了一个需求需要实现将页面投屏到屏幕上并能够进行开启全屏和退出全屏的操作。
尽管网上有许多第三方开源库可供使用但由于后续业务场景的不确定性修改源代码可能带来较大的成本和风险。鉴于全屏功能的实现并不复杂因此我自己封装了一个解决方案。
现在我将这个自封装的代码分享给大家可以直接拷贝并使用。
废话不多说直接上代码
html
div idroot stylewidth: 200px;height: 200px;background-color: gray;全屏操作button idopenScreen开启全屏/buttonbutton idcloseScreen退出全屏/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) { //FireFoxdocument.mozCancelFullScreen();} else if (document.msExitFullscreen) { // IE11document.msExitFullscreen();}} else {if (this.el.requestFullscreen) {this.el.requestFullscreen();} else if (this.el.webkitRequestFullScreen) { //Chrome等this.el.webkitRequestFullScreen();} else if (this.el.mozRequestFullScreen) { //FireFoxthis.el.mozRequestFullScreen();} else if (this.el.msRequestFullscreen) { // IE11this.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)});
})
