javascript全屏操作 

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style type="text/css">
  html,
  body {
    padding: 0;
    margin: 0;
    width: 100%;
    height: 100%;
    background: green;
  }
  </style>
</head>

<body>
  <button id="btn">button</button>
  <p id="">这是一个段落</p>
  <script type="text/javascript">
  var btn = document.querySelector('#btn');
  btn.addEventListener('click', function(e) {
    if (document.body.RequestFullscreen) {
      document.body.RequestFullscreen();
    } else if (document.body.webkitRequestFullscreen) {
      document.body.webkitRequestFullscreen();
    } else {
      console.log('不支持')
    }
    // e.preventDefault()
  })
  </script>
</body>

</html>

点击按钮将会全屏，esc退出全屏

posted @ 2017-07-31 16:50  wmui  阅读(254)  评论(0)  编辑  收藏  举报