JavaScriptからブラウザをフルスクリーン化してみる

こちらぼくできるの知らなかったのですが、
CSS 3D Clouds
こちらのコードを見ていたら発見したのでメモ。

サンプルコード

window.addEventListener('load', function() {
  var element = document.getElementById('fullscreenBtn');
  if(element) {
    element.addEventListener('click', function(e) {
      // webkit
      if(document.body.webkitRequestFullScreen) {
        document.body.onwebkitfullscreenchange = function(e) {
          document.body.style.width = window.innerWidth + 'px';
          document.body.style.height = window.innerHeight + 'px';
          document.body.onwebkitfullscreenchange = function() {
          };
        };
        document.body.webkitRequestFullScreen();
      }

      // mozilla
      if(document.body.mozRequestFullScreen) {
        document.body.mozRequestFullScreen();
      }

      e.preventDefault();
    }, false);
  }
});

webkitとmozillaの違いとしてはwebkitのほうは、onwebkitfullscreenchangeイベントにて高さを指定してあげないと
すごくちっちゃくなってしまうこと。

ためした対応ブラウザ

  • Mac – Firefox15
  • Mac – Chrome22
  • Mac – Safari6.0
  • Win – Firefox15
  • Win – Chrome22
  • Win – Safari5.1.2

どのブラウザで見ても、フルスクリーンになるときのモーションに違いがあったので楽しかったです。

サンプルURL

JavaScriptからフルスクリーン化

github

JavaScriptからフルスクリーン化 — Gist

Google Chrome OS ~最新技術と戦略を完全ガイド~
小池良次 中島聡 伊藤千光 太田昌吾 まえだひさこ 向井領治
インプレスジャパン
売り上げランキング: 343048