js全屏显示

最新推荐文章于 2024-05-16 14:43:58 发布

你离优秀差多少

最新推荐文章于 2024-05-16 14:43:58 发布

阅读量809

点赞数 1

文章标签： javascript 前端

本文链接：https://blog.csdn.net/weixin_45891332/article/details/122120869

版权

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <button id="btn" style="width: 200px;height: 50px;">全屏显示</button>
  <button id="btn2" style="width: 200px;height: 50px;">退出全屏</button>
  <br>
  <canvas width="500" height="500" style="background-color: antiquewhite;"></canvas>
  <script>
    function fun() {
      let isFull = document.fullscreen || document.mozFullScreen || document.webkitIsFullScreen || document.msFullscreenElement;
      console.log(11, isFull)
      if (isFull) {
        console.log('此时是全屏显示');
      }else {
        console.log('目前不是全屏');
      }
    }

    //全屏时候事件监听,满屏和退出满屏时触发
    document.addEventListener('fullscreenchange', fun, false)
    document.addEventListener("mozfullscreenchange", fun, false);
    document.addEventListener("webkitfullscreenchange", fun, false);
    document.addEventListener('msfullscreenchange',fun,false)//添加监听无效
	//IE浏览器的添加监听无效,使用下面的满屏
    document.onmsfullscreenchange = function(){
       console.log('fullscreen2');
      let isFull = document.fullscreen || document.mozFullScreen || document.webkitIsFullScreen || document.msFullscreenElement;
      console.log(22, isFull)
    }
    
    //document.onmsfullscreenchange = fun;

	//全屏显示按钮
    var btn=document.getElementById('btn')
    btn.onclick=function(){
     // var element = document.body
     // 使用document.body进行满屏操作, 在全屏模式下的默认样式。参考 whatwg 标准的文档[https://fullscreen.spec.whatwg.org/#user-agent-level-style-sheet-defaults]。全屏后如果页面黑色,需要修改默认样式 ::backdrop 伪元素和 :fullscreen 伪类
      
      var element = document.documentElement
       if (element.requestFullscreen) {
        element.requestFullscreen();
      } else if (element.mozRequestFullScreen) {
        element.mozRequestFullScreen();
      } else if (element.webkitRequestFullscreen) {
        element.webkitRequestFullscreen();
      } else if (element.msRequestFullscreen) {
        element.msRequestFullscreen();
      }
    }

//退出全屏
    var btn2=document.getElementById('btn2')
    btn2.onclick=function(){
       if (document.exitFullscreen) {
        document.exitFullscreen();
      } else if (document.mozCancelFullScreen) {
        document.mozCancelFullScreen();
      } else if (document.webkitExitFullscreen) {
        document.webkitExitFullscreen();
      } else if (document.msExitFullscreen) {
        document.msExitFullscreen();
      }
    }
  </script>
</body>
</html>

你离优秀差多少

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
js全屏显示

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><body> <button id="btn" .
复制链接

扫一扫