JavaScript でページ全体や要素をフルスクリーン化する方法

phiary に引っ越しました. 毎日プログラミングやWebに関する情報を発信しています! RSS 登録してたまに覗いたり, tweet やハテブして拡散してもらえると幸いです.

Pocket

JavaScript でページ全体や要素をフルスクリーン化する方法について 紹介します.

フルスクリーン化すれば大きく画面を使うことができます. ブログなどにボタンとして置いておくと便利かもしれませんね.

tmlib.js では要素を拡張して標準でサポートしているのですが, 中で何をやっているのか少し触れてみようとおもいます.

Table of contents

サンプルを動かしてみよう

jsdo.it で画面をクリックするとフルスクリーン化するサンプルを作ってみました.

Demo Download

iframe だと反応しないみたいなので, jsdo.it ページの “Smart Phone” ボタンで 起動して画面をクリックしてみてください.

フルスクリーンになるのがわかると思います. Esc で解除できます.

コードはこれだけ

<img id="img" src="https://twimg0-a.akamaihd.net/profile_images/484079620/kenkyo.jpg" />

▲HTML

window.onload = function() {
   
    document.body.onclick = function() {
        if (this.webkitRequestFullScreen) {
             this.webkitRequestFullScreen();
        }
        else if (this. mozRequestFullScreen) {
            this. mozRequestFullScreen();
        }
        else {
            alert("not found")
        }
    };
};

▲JavaScript

up

RequestFullScreen を呼ぶだけ♪

上記のコードからわかるように RequestFullScreen を実行するだけでフルスクリーンにすることができます.

気をつける点は, まだ標準化されていないメソッドなので メソッドの前にベンダープレフィックスをつける必要があります.

  • chrome では webkitRequestFullScreen
  • firefox では mozRequestFullScreen

これらのメソッドは HTMLElement.prototype で定義されているので, document.body 以外にも画像要素やビデオ要素単体をフルスクリーンにすることもできます.

ちなみに, フルスクリーンのキャンセルには CancelFullScreen メソッドを使います.

up

TRACK BACK URL

POST COMMENT

メールアドレスが公開されることはありません。

COMMENT