JavaScriptでフルスクリーン表示(標準API定義しちゃう？) [ WEB ]

JavaScriptで、フルスクリーン表示するには、MDNを見るとまだ、ベンタープレフィックスがいるらしい。
ならば、ベンダープレフィックスなしで標準APIを使えるようにしたいね☆

初めはHAKUHIN's home pageさんのコードを使おうと思っていたが。。。

将来、標準APIが採用された時のことを考えると標準メソッドとして使えるほうが良いと思ったので、自分でコーディングしておく。

そうすれば、APIの使い方も再学習しなくて良いし、将来的にはこの追加したJavascriptコードを捨てるだけで、済むからね★　(ハイ、ここ重要！！)

でも、フルスクリーンのJavascriptをWEBで検索すると、ほとんどの人は独自関数にまとめちゃってるみたいですな。
Javascriptの凄さをもっと活かしてほしいぞ！！

というわけで、requestFullscerrn()メソッドを使えるようにしちゃいます。

// requestFullscreenメソッドを有効にする
Element.prototype.requestFullscreen = Element.prototype[(
 Element.prototype.requestFullscreen ||
 Element.prototype.msRequestFullscreen ||
 Element.prototype.webkitRequestFullScreen ||
 Element.prototype.mozRequestFullScreen ||
 {name:null}).name] || function(){};

上記のコードをJavascriptの先頭の方にいれておけば良い。
後は、requestFullscreen()メソッドがあるものとして、エレメントから呼べばフルスクリーンになるはず。

<div id="fullScreen">
<h3>Full Screen Demo</h3>
</div>

var full = document.getElementById("fullScreen");
full.onclick = function(e){
    this.requestFullscreen();
};

追記：JavaScriptでフルスクリーン終了・エレメント取得も
追記：__defineGetter__()じゃなくて、defineProperty()にしようかな

ふんどしの持ち主

• MDN
• HAKUHIN's home page