Hung Pro VN ™: Tạo Chế Độ Toàn Màn Hình Cho Website/Blog

Chào mọi người.

Lang thang internet mình thấy bên blogspotvn.net chia sẽ thủ thuật Thêm chức năng bật/tắt chế độ toàn màn hình cho website/blog, thấy hay nên mình mang về chia sẽ lại cho mọi người tìm hiểu.

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>

🌻🌻🌻 Sao chép nhớ ghi nguồn giúp Hung.Pro.VN nhé 🌞 Nguồn: Hùng Program Việt Nam Link bài gốc: http://www.hung.pro.vn/2025/10/tao-che-do-toan-man-hinh-cho-website-blog.html 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.

<img id="ImageFullscreen" src="https://d.hung.pro.vn/img/no-img-1.webp"/>

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

Chúc mọi người thành công với thủ thuật trên.

Theo BlogspotVN.Net