Home

FullScreen.js は、フルスクリーンAPIをハンドリングする手段を提供します。

Features

• FullScreen.enable はフルスクリーン機能が有効なら true になります
• FullScreen.on(), FullScreen.off() で、 fullscreenchange, fullscreenerror イベントをハンドリングできます
• FullScreen.request(node) で指定した node をフルスクリーン表示します
• FullScreen.toggle(node) で指定した node のフルスクリーン表示状態を切り替えます
• FullScreen.exit() でフルスクリーン表示を終了します
• FullScreen.isActive() はフルスクリーン表示中に true になります
• FullScreen.getActiveNode() はフルスクリーン表示している node を返します
• FullScreen.release() は内部で抱えているリソースを解放します

Browser compatibility

http://caniuse.com/#feat=fullscreen

	FullScreen.enable
Chrome 🖥️	⭕
Chrome 📱	⭕
Firefox	⭕
Safari 🖥️	⭕
Safari 📱	❌
IE 10	❌
IE 11	⭕
Edge	⭕
Android browser	❌

<style>
#content { width: 100%; height: 100%; background-color: skyblue; }
#trace { width: 100%; height: 100px; }
</style>

<div id="content">
<button onclick="_fullscreen()">FullScreen.request()</button> |
<button onclick="_toggle()">FullScreen.toggle()</button> |
<button onclick="_exit()">FullScreen.exit()</button> |
<button onclick="_release()">FullScreen.release()</button><br>
<output id="output"></output>
</div>

<script src="./lib/WebModule.js"></script>
<script src="./lib/FullScreen.js"></script>
<script>

var content = document.querySelector("#content");
var output = document.querySelector("#output");

window.onload = function() {
  if (FullScreen.enable) {
    FullScreen.on("fullscreenchange", _onfullscreenchange);
    FullScreen.on("fullscreenerror",  _onfullscreenerror);
    setTimeout(_tick, 1000);
  } else {
    output.innerHTML += "FullScreen API is not supported";
  }
}
function _onfullscreenchange(eventType, event) {
  console.info("FullScreen change event", eventType); // -> "fullscreenchange"
}
function _onfullscreenerror(eventType, event) {
  console.info("FullScreen error event", eventType); // -> "fullscreenerror"
}

function _release() {
  FullScreen.off("fullscreenchange", _onfullscreenchange);
  FullScreen.off("fullscreenerror",  _onfullscreenerror);
  FullScreen.release();
  output.innerHTML += "x";
}

function _tick() {
  setTimeout(_tick, 1000);

  if (FullScreen.enable) {
    if (FullScreen.isActive()) {
      output.innerHTML += "A";
      if (FullScreen.getActiveNode() !== content) {
        document.body.backgroundColor = "red";
      }
    } else {
      output.innerHTML += "-";
    }
  }
}
function _fullscreen() {
  if (FullScreen.enable) { FullScreen.request(content); }
}
function _toggle() {
  if (FullScreen.enable) { FullScreen.toggle(content); }
}
function _exit() {
  if (FullScreen.enable) { FullScreen.exit(); }
}
</script>