不好用html5-api：fullscreen

最新推荐文章于 2024-06-19 17:40:21 发布

mkmin

最新推荐文章于 2024-06-19 17:40:21 发布

阅读量1.3k

点赞数

分类专栏： html5 文章标签： html5 前端

本文链接：https://blog.csdn.net/HUSHILIN001/article/details/78026951

版权

html5 专栏收录该内容

6 篇文章 1 订阅

订阅专栏

为啥不好用？因为兼容性贼差，但是后续肯定会改动的，所以现在记录下来先：

http://caniuse.com/#search=FullScreen

    <!DOCTYPE html>  
    <html>  
    <head>  
      <meta charset="UTF-8">  
      <title>Document</title>  
      <style>  
        html:-moz-full-screen {background: red;}
        html:-webkit-full-screen {background: red;}  
        html:fullscreen {background: red;}  
      </style>  
    </head>  
    <body>  
      <button οnclick="launchFullScreen()">全屏</button>  
<input />
    <button οnclick="exitFullscreen()">退出全屏</button>  
    <script>  
      // 找到支持的方法, 使用需要全屏的 element 调用  
      function launchFullScreen(element) {  
        var element=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();  
        }  
      }  
      
     //离开全屏模式
      function exitFullscreen() {  
        if (document.exitFullscreen) {  
          document.exitFullscreen();  
        } else if (document.mozExitFullScreen) {  
          document.mozExitFullScreen();  
        } else if (document.webkitExitFullscreen) {  
          document.webkitExitFullscreen();  
        }  
      }  
      element.webkitRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT);//全屏状态允许键盘输入  
      document.addEventListener("fullscreenchange", function () {  
       fullscreenState.innerHTML = (document.fullscreen)? "" : "not ";  
      }, false);  
      
      document.addEventListener("mozfullscreenchange", function () {  
        fullscreenState.innerHTML = (document.mozFullScreen)? "" : "not ";  
      }, false);  
      
      document.addEventListener("webkitfullscreenchange", function () {  
        fullscreenState.innerHTML = (document.webkitIsFullScreen)? "" : "not ";  
      }, false);  
      
      
    </script>  
    </body>  
    </html>

当然，现在不推荐使用，兼容性真的太差了