Thêm chức năng bật/tắt chế độ toàn màn hình cho website/blog

Bài viết này sẽ hướng dẫn bạn thêm Button có chức năng bật/tắt chế độ toàn màn hình cho website. Để rõ hơn bạn click vào button bên dưới nha
Toggle Fullscreen

Hướng dẫn

Copy đoạn mã sau và đặt vào nơi muốn đặt ở website

<button id="Fullscreen" type="button">Toggle Fullscreen</button>

Sử dụng đoạn javascript bên dưới để chức năng hoạt động

<script>
function toggleFullscreen(elem) {
  elem = elem || document.documentElement;
  if (!document.fullscreenElement && !document.mozFullScreenElement &&
    !document.webkitFullscreenElement && !document.msFullscreenElement) {
    if (elem.requestFullscreen) {
      elem.requestFullscreen();
    } else if (elem.msRequestFullscreen) {
      elem.msRequestFullscreen();
    } else if (elem.mozRequestFullScreen) {
      elem.mozRequestFullScreen();
    } else if (elem.webkitRequestFullscreen) {
      elem.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
    }
  } else {
    if (document.exitFullscreen) {
      document.exitFullscreen();
    } else if (document.msExitFullscreen) {
      document.msExitFullscreen();
    } else if (document.mozCancelFullScreen) {
      document.mozCancelFullScreen();
    } else if (document.webkitExitFullscreen) {
      document.webkitExitFullscreen();
    }
  }
}
document.getElementById('Fullscreen').addEventListener('click', function() {
  toggleFullscreen();
});
document.getElementById('ImageFullscreen').addEventListener('click', function() {
  toggleFullscreen(this);
});
</script>

Mở Rộng

Ở đoạn javascript bên trên còn có chức năng mở ảnh chế độ toàn màn hình khi click vào và tắt chế độ này khi click tiếp vào ảnh hoặc nút "Esc" bằng cách thêm id "ImageFullscreen" vào cho ảnh
Ví dụ:

<img id="ImageFullscreen" src="https://3.bp.blogspot.com/-RmkauEsIiCA/XOQAjxmm48I/AAAAAAAAAeY/2IPqA78FUa4bMyodMCKE5qDV8pJ3mQJCACLcBGAs/s200/K%25C3%25BD-t%25E1%25BB%25B1-%25C4%2591%25E1%25BA%25B7c-bi%25E1%25BB%2587t-cho-games.jpg"/>

Bạn thử click vào ảnh bên dưới để xem demo