javascript - 如何让一个div全屏？

Question

我正在使用 Flot将我的一些数据绘制成图表，我认为在单击按钮时让该图表全屏显示(占据显示器上的全部空间)会很棒。目前，我的div如下:

<div id="placeholder" style="width:800px;height:600px"></div>

当然，style属性只是为了测试。在实际设计之后，我会将其移至 CSS。无论如何我可以让这个 div 全屏显示并仍然保留所有事件处理吗？

Answer 1

您可以为此使用 HTML5 Fullscreen API(我认为这是最合适的方式)。

全屏必须通过用户事件(点击、按键)触发，否则将无法工作。

这里有一个按钮，它可以在单击时使 div 全屏显示。在全屏模式下，单击按钮将退出全屏模式。

$('#toggle_fullscreen').on('click', function(){
  // if already full screen; exit
  // else go fullscreen
  if (
    document.fullscreenElement ||
    document.webkitFullscreenElement ||
    document.mozFullScreenElement ||
    document.msFullscreenElement
  ) {
    if (document.exitFullscreen) {
      document.exitFullscreen();
    } else if (document.mozCancelFullScreen) {
      document.mozCancelFullScreen();
    } else if (document.webkitExitFullscreen) {
      document.webkitExitFullscreen();
    } else if (document.msExitFullscreen) {
      document.msExitFullscreen();
    }
  } else {
    element = $('#container').get(0);
    if (element.requestFullscreen) {
      element.requestFullscreen();
    } else if (element.mozRequestFullScreen) {
      element.mozRequestFullScreen();
    } else if (element.webkitRequestFullscreen) {
      element.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
    } else if (element.msRequestFullscreen) {
      element.msRequestFullscreen();
    }
  }
});

#container{
  border:1px solid red;
  border-radius: .5em;
  padding:10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
  <p>
    <a href="#" id="toggle_fullscreen">Toggle Fullscreen</a>
  </p>
  I will be fullscreen, yay!
</div>

另请注意，适用于 Chrome 的全屏 API 不适用于非安全页面。参见 https://sites.google.com/a/chromium.org/dev/Home/chromium-security/deprecating-powerful-features-on-insecure-origins了解更多详情。

另一件需要注意的事情是 :fullscreen CSS 选择器。您可以将其附加到任何 css 选择器，以便在该元素全屏时应用规则:

#container:-webkit-full-screen,
#container:-moz-full-screen,
#container:-ms-fullscreen,
#container:fullscreen {
    width: 100vw;
    height: 100vh;
    }