共计 1456 个字符,预计需要花费 4 分钟才能阅读完成。
1、援用文章:https://www.bbsmax.com/A/xl56…
2、全屏时可依据是否传入 dom 元素,判断是整个页面全屏,还是某个 dom 全屏,例如:
this.handleFullScreen('#overviewMapContainer');
3、呈现的问题:在应用 element、iview、ant design 等 ui 组件时,Select、Dropdown 组件默认是挂载到 body 节点,所以如果是具体某个 dom 元素的全屏,可能会生效,但只有挂载到相应 dom 元素下应该就能够实现 (未测试)
// 全屏
handleFullScreen(dom) {
let mapMainContent;
// 判断是否有 dom 传入,没有则是整个页面全屏展现
dom ? mapMainContent = document.querySelector(dom) : mapMainContent = document.documentElement;
if (this.isFUllScreenEnabled()) {if (this.hasFullScreenElement()) {this.exitFullScreen();
} else {this.setFullScreen(mapMainContent);
}
} else {console.log('此浏览器不反对全屏');
}
},
// 判断浏览器是否反对全屏
isFUllScreenEnabled() {return document.fullscreenEnabled || document.webkitFullscreenEnabled || document.mozFullScreenEnabled || document.msFullscreenEnabled;},
// 判断是否有已全屏的元素
hasFullScreenElement() {return document.fullscreenElement || document.webkitFullscreenElement || document.mozFullScreenElement || document.msFullscreenElement;},
// 将指标元素设置为全屏展现
setFullScreen(target) {if (target.requestFullscreen) {target.requestFullscreen();
}
if (target.webkitRequestFullscreen) {target.webkitRequestFullscreen();
}
if (target.mozRequestFullScreen) {target.mozRequestFullScreen();
}
if (target.msRequestFullscreen) {target.msRequestFullscreen();
}
},
// 文档退出全屏
exitFullScreen() {if (document.exitFullscreen) {document.exitFullscreen();
}
if (document.webkitExitFullscreen) {document.webkitExitFullscreen();
}
if (document.mozCancelFullScreen) {document.mozCancelFullScreen();
}
if (document.msExitFullscreen) {document.msExitFullscreen();
}
}
正文完
发表至: javascript
2020-11-27