实现Web全屏功能-CSDN博客

本文为博主原创，未经博主允许不得转载。如有问题，欢迎指正。

本文链接：https://blog.csdn.net/qq_45021462/article/details/135626768

本文介绍了如何使用JavaScript在Web浏览器中实现全屏显示的功能，详细讲解了相关API的使用方法和注意事项，对于前端开发者了解和实现在网页中切换全屏状态具有指导意义。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<div class="full-screen-icon" @click="fullscreenchange">
   <img src="@/assets/full-screen.png" alt="" v-if="!isFullScreen">
   <img src="@/assets/exit-full-screen.png" alt="" v-else>
 </div>

// 全屏/退出全屏
  function fullscreenchange() {
	  isFullScreen.value = !!document.fullscreenElement
    if (isFullScreen.value) {
      console.log('退出全屏')
      if (document.exitFullscreen) {
        document.exitFullscreen()
      } else if (document.msExitFullscreen) {
        document.msExitFullscreen()
      } else if (document.mozCancelFullScreen) {
        document.mozCancelFullScreen()
      } else if (document.webkitCancelFullScreen) {
        document.webkitCancelFullScreen()
      }
    } else {
      var fullscreen = document.getElementById('content')  // 需要全屏的元素
      console.log('进入全屏')
      if (fullscreen.requestFullscreen) {
        fullscreen.requestFullscreen()
      } else if (fullscreen.mozRequestFullScreen) {
        fullscreen.mozRequestFullScreen()
      } else if (fullscreen.webkitRequestFullscreen) {
        fullscreen.webkitRequestFullscreen()
      } else if (fullscreen.msRequestFullscreen) {
        fullscreen.msRequestFullscreen()
      }
    }
  }

  // 监听监听全屏/退出全屏效果事件
  document.addEventListener("fullscreenchange", function( event ) {
    if (document.fullscreenElement) {
      isFullScreen.value = true
    } else {
      isFullScreen.value = false
    }
  });

web全屏功能