JavaScript---获取浏览器状态：设置页面全屏或退出全屏！！！（复制粘贴即可）

绝世唐门三哥

已于 2024-03-12 15:03:52 修改

阅读量914

点赞数 1

分类专栏： JavaScript 浏览器知识点总结文章标签： javascript

于 2020-06-30 15:49:09 首次发布

本文链接：https://blog.csdn.net/COCOLI_BK/article/details/107043958

版权

知识点总结同时被 3 个专栏收录

257 篇文章 4 订阅

订阅专栏

JavaScript

79 篇文章 5 订阅

订阅专栏

浏览器

16 篇文章 0 订阅

订阅专栏

直接上代码~~~

<!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>