点击按钮触发 requestFullscreen()
函数打开全屏
requestFullscreen () { const docElm = document.documentElement if (docElm.requestFullscreen) { docElm.requestFullscreen() } else if (docElm.msRequestFullscreen) { docElm.msRequestFullscreen() } else if (docElm.mozRequestFullScreen) { docElm.mozRequestFullScreen() } else if (docElm.webkitRequestFullScreen) { docElm.webkitRequestFullScreen() } }
点击按钮触发 exitFullScreen()
函数关闭全屏
exitFullScreen () { if (document.exitFullscreen) { document.exitFullscreen() } else if (document.msExitFullscreen) { document.msExitFullscreen() } else if (document.mozCancelFullScreen) { document.mozCancelFullScreen() } else if (document.webkitCancelFullScreen) { document.webkitCancelFullScreen() } }
如果需要监听全屏状态变换,可以监听 fullscreenchange
事件
document.addEventListener('fullscreenchange', () => { console.log('fullscreenchange') })
Vue项目实现地址
https://github.com/gywgithub/vue-d3-examples
https://github.com/gywgithub/vue-d3-examples/blob/master/src/views/Examples.vue#L263
参考链接
https://developer.mozilla.org/en-US/docs/Web/API/Fullscreen_API
https://developer.mozilla.org/en-US/docs/Web/API/Fullscreen_API/Guide