共计 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