ベンダープレフィックスなしで、フルスクリーン表示 [ WEB ]

Javascriptのフルスクリーン標準APIを実装しちゃうお話の完結編。

※久しぶりに、このブログ見てたら、前回、前々回とコードが間違っていたので、修正しておいた。
fullscreenElementの頭文字が大文字になってた・・・おそまつ。

で、ついでに修正版全コードと動作サンプルを載せておこうと思う。
ちなみにこのコードは将来、標準化されるであろうAPIを追加しちゃうものなのです。
独自関数は使わず、Javascriptの潜在的パワーを活かして、ベンダープレフィックスなしで、動作するよ★

次のfullscreen.jsを使うことによって、requestFullscreen()、exitFullscreen()、fullscreenElementが利用できるようになるのだ！！

fullscreen.js
Element.prototype.requestFullscreen = Element.prototype[(
    Element.prototype.requestFullscreen ||
    Element.prototype.msRequestFullscreen ||
    Element.prototype.webkitRequestFullScreen ||
    Element.prototype.mozRequestFullScreen ||
    {name:null}).name] || function(){};
 
document.exitFullscreen = 
    document.exitFullscreen ||
    document.msExitFullscreen ||
    document.webkitExitFullscreen ||
    document.mozCancelFullScreen ||
    function(){};
 
if(!document.fullscreenElement)
    Object.defineProperty(document, "fullscreenElement",{
        get : function(){
            return(
                document.msFullscreenElement ||
                document.webkitFullscreenElement ||
                document.mozFullScreenElement || null);
        }
    });

demo.js
$(function(){
    var bg;
    $("#elem").click(function(){
        if(document.fullscreenElement){
            bg = (bg == "blue") ? "black" : "blue";
            $(document.fullscreenElement).css("background",bg);
        }
    });
    $("#full").click(function(){
        $("#fullScreen")[0].requestFullscreen();
        $("#mode").text("FULL SCREEN").css("color", "#0FF");
    });
    $("#exit").click(function(){
        document.exitFullscreen();
        $("#mode").text("NORMAL SCREEN").css("color", "#FF0");
    });
});

demo.html
<script src="https://code.jquery.com/jquery-2.1.4.js"></script>
<script src="fullscreen.js"></script>
<script src="demo.js"></script>
<div id="fullScreen">
(#fullScreen)
    <h3>Full Screen Demo</h3>
    MODE : <span id="mode" style="color: yellow;">NORMAL SCREEN</span>
    
    <button id="elem">(#elem) FullscreenElement [BG色変更(フルスクリーン時のみ動作)]</button>
    <button id="full">(#full) RequestFullscreen() [フルスクリーンにする]</button>
    <button id="exit">(#exit) ExitFullscreen() [フルスクリーン解除]</button>
</div>

(#fullScreen)

Full Screen Demo

MODE : NORMAL SCREEN

今度は大丈夫だと思う・・・

ふんどしの持ち主

• アホな俺