Membuat Tombol Full Screen di Blog (Pure Javascript)

Kelebihan :

• Murni hanya menggunakan script javascript tanpa library.
• Simple. Mudah dimengerti.

Kekurangan :

• Menambah berat blog sekitar 1-2Kb.
• Efek fullscreen menghilang jika halaman berganti. (Tidak berlaku jika halaman dimuat dengan AJAX).

Demo :

Full Screen ON Full Screen OFF Demo on Codepen

---

HTML

<a href="javascript:;" id="fullScreen" onclick="fullScreen();">Full Screen <span>ON</span></a>
<a href="javascript:;" id="close-fullScreen" onclick="closefullScreen();" style="display: none;">Full Screen <span>OFF</span></a>

Javascript

<script type='text/javascript'>
//<![CDATA[
//Fullscreen
var elem = document.documentElement;
var fullscrn = document.getElementById("fullScreen");
var closefullscrn = document.getElementById("close-fullScreen");
function fullScreen(){
if (elem.requestFullscreen) {
  elem.requestFullscreen(),
    fullscrn.style.display = "none",
    closefullscrn.style.display = "block";
  } else if (elem.mozRequestFullScreen) { /* Firefox */
    elem.mozRequestFullScreen();
  fullscrn.style.display = "none",
    closefullscrn.style.display = "block";
  } else if (elem.webkitRequestFullscreen) { /* Chrome, Safari and Opera */
    elem.webkitRequestFullscreen();
    fullscrn.style.display = "none",
    closefullscrn.style.display = "block";
  } else if (elem.msRequestFullscreen) { /* IE/Edge */
    elem.msRequestFullscreen();
    fullscrn.style.display = "none",
    closefullscrn.style.display = "block";
  }
};
function closefullScreen(){
if (document.exitFullscreen) {
    document.exitFullscreen(),
    fullscrn.style.display = "block",
    closefullscrn.style.display = "none";
  } else if (document.mozCancelFullScreen) { /* Firefox */
    document.mozCancelFullScreen();
    fullscrn.style.display = "block",
    closefullscrn.style.display = "none";
  } else if (document.webkitExitFullscreen) { /* Chrome, Safari and Opera */
    document.webkitExitFullscreen();
    fullscrn.style.display = "block",
    closefullscrn.style.display = "none";
  } else if (document.msExitFullscreen) { /* IE/Edge */
    document.msExitFullscreen();
    fullscrn.style.display = "block",
    closefullscrn.style.display = "none";
  }
};
//]]>
</script>