单击全屏并关闭全屏。

Question

我有一个全屏按钮，但我希望full screen和close screen都在一个按钮中

这是我的代码片段。

​

$(document).ready(function () {   
//Btn Full Screen
  $("#btnFullScreen").click(function () {
    alert("Test");
    var el = document.documentElement,
    rfs = el.requestFullscreen
      || el.webkitRequestFullScreen
      || el.mozRequestFullScreen
      || el.msRequestFullscreen
    ;
    rfs.call(el);
  })
});           

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<div>
  <input type="submit" id="btnFullScreen" name="btnFullScreen" value="Full Screen" />
</div>

​

全屏幕正常工作。但是我想要相同的事件在同一个按钮中，但无法弄清楚。

Answer 1

可以将当前窗口状态保存到按钮属性，如下所示：

​

	$(document).ready(function () {
  //Btn Full Screen
    $("#btnFullScreen").click(function () {
  	  if($(this).attr('data-fullscreen') === 'true') {
      if (document.exitFullscreen) {
        document.exitFullscreen();
      } else if (document.mozCancelFullScreen) { /* Firefox */
        document.mozCancelFullScreen();
      } else if (document.webkitExitFullscreen) { /* Chrome, Safari and Opera */
        document.webkitExitFullscreen();
      } else if (document.msExitFullscreen) { /* IE/Edge */
        document.msExitFullscreen();
      }
      $(this).attr('data-fullscreen', '');
      $(this).attr('value', 'Full Screen');
    } else {
      var el = document.documentElement,
        rfs = el.requestFullscreen
          || el.webkitRequestFullScreen
          || el.mozRequestFullScreen
          || el.msRequestFullscreen
      ;
      rfs.call(el);
      $(this).attr('data-fullscreen', 'true');
      $(this).attr('value', 'Exit Fullscreen');
    }
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
    <input type="submit" id="btnFullScreen" name="btnFullScreen" value="Full Screen" />
</div>

​