JavaScript实现浏览器全屏功能-CSDN博客

本文链接：https://blog.csdn.net/woochon/article/details/100120654

本文介绍了如何使用JavaScript检测浏览器是否支持全屏功能，并提供了全屏功能的兼容性判断，主要参考了iview-admin项目。

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

window.navigator.userAgent.indexOf(‘MSIE’)<0为true时，表示浏览器支持进入全屏
还需做兼容性判断

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>是否全屏</title>
  <style>
    *{
      margin: 0;
      padding: 0;
    }
    body{
      background-color: rgba(0,0,0,0.75);
    }
  </style>
</head>
<body>
<button onclick="fullScreen('half')">进入全屏</button>
<button onclick="fullScreen('full')">退出全屏</button>
<script>
  function fullScreen(state){

    if(window.navigator.userAgent.indexOf('MSIE')<0){
      //console.log(window.navigator.userAgent);
      //console.log(window.navigator.userAgent.indexOf('MSIE'));
      console.log('显示能进入或者退出全屏的');
    }

    //console.log(document.body.requestFullscreen);

    let main = document.body
    if (state==='full') {
      if (document.exitFullscreen) {
        document.exitFullscreen()
      } else if (document.mozCancelFullScreen) {
        document.mozCancelFullScreen()
      } else if (document.webkitCancelFullScreen) {
        document.webkitCancelFullScreen()
      } else if (document.msExitFullscreen) {
        document.msExitFullscreen()
      }
    } else if(state==='half'){
      if (main.requestFullscreen) {
        main.requestFullscreen()
      } else if (main.mozRequestFullScreen) {
        main.mozRequestFullScreen()
      } else if (main.webkitRequestFullScreen) {
        main.webkitRequestFullScreen()
      } else if (main.msRequestFullscreen) {
        main.msRequestFullscreen()
      }
    }
  }
</script>
</body>
</html>