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

JavaScriptからブラウザをフルスクリーン化してみる” への1件のコメント

  1. document.body.webkitRequestFullScreen()
    よりも
    document.documentElement.webkitRequestFullScreen()
    の方が実際いい

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

*

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>