效果如下:
原图全屏后效果,调用dome的requestFullScreen()方法。
假设要放大id为"someSmallImage"的元素 vue 代码,如出现浏览器不允许调用全局api的问题,可把requestFullScreen函数写在fullScreen方法中即可解决
<div id="someSmallImage" @click="fullScreen"></div>
fullScreen () {
let isFull = document.fullscreenElement || document.msFullscreenElement || document.mozFullscreenElement || document.webkitFullscreenElement || false;
// 查看是否有被全屏的元素 需适配各个浏览器
if (!this.mapBoxContainer) {
this.mapBoxContainer = document.getElementById("someSmallImage"); //拿到要全屏的元素并存储
}
if (isFull) {
this.exitFullsreen() //如果存在已全屏元素,退出全屏
} else {
this.requestFullScreen(this.mapBoxContainer); //如果不存在全屏元素,说明是缩小状态,调用全屏函数
}
},
//全屏函数
requestFullScreen(element){
var requestMethod = element.requestFullScreen || element.webkitRequestFullScreen || element.mozRequestFullScreen || element.msRequestFullScreen || false; //拿到全屏函数 适配各种浏览器
if (requestMethod) {
requestMethod.call(element);
} else if (typeof window.ActiveXObject !== "undefined") {
// eslint-disable-next-line no-undef
var wscript = new ActiveXObject("WScript.Shell");
if (wscript != null) {
wscript.SendKeys("{Fll}");
}
}
},
//退出全屏
exitFullscreen(){
if (document.exitFullscreen) {
document.exitFullscreen();
} else if (document.msExitFullscreen) {
document.msExitFullscreen();
}
else if (document.mozExitFullscreen) {
document.mozExitFullscreen();
}
else if (document.webkitExitFullscreen) {
document.webkitExitFullscreen();
}
},