JS 实现全屏效果

简介: 点击按钮触发 requestFullscreen() 函数打开全屏,点击按钮触发 exitFullScreen() 函数关闭全屏。


image.png点击查看原视频


点击按钮触发 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




目录
相关文章
|
7月前
|
JavaScript
|
7月前
|
JavaScript
如何使用JS控制指定页面大小开启全屏和退出全屏
如何使用JS控制指定页面大小开启全屏和退出全屏
60 0
|
7月前
|
JavaScript
JS中全屏事件
JS中全屏事件
|
7月前
|
JavaScript
JS实现全屏的方法合集
JS实现全屏的方法合集
|
JavaScript
jQuery fullpage.js 全屏分页以及动画使用
jQuery fullpage.js 全屏分页以及动画使用
64 0
|
2月前
|
JavaScript 前端开发 API
JavaScript全屏,监听页面是否全屏
JavaScript全屏,监听页面是否全屏
63 0
|
4月前
|
JavaScript 前端开发 API
js全屏,监听页面是否全屏
js全屏,监听页面是否全屏
73 4
|
6月前
|
JavaScript
JS实现全屏和退出全屏
JS实现全屏和退出全屏
|
5月前
|
前端开发 JavaScript
前端 JS 经典:封装全屏功能
前端 JS 经典:封装全屏功能
42 0
|
5月前
|
前端开发 JavaScript
js 进入浏览器全屏(F11效果)、退出全屏、指定元素全屏、判断当前是否全屏、监听浏览器全屏事件、定义全屏时的css样式(全屏伪类)
js 进入浏览器全屏(F11效果)、退出全屏、指定元素全屏、判断当前是否全屏、监听浏览器全屏事件、定义全屏时的css样式(全屏伪类)
620 0