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 ảnhVí 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
Hi vọng bài viết này sẽ có ích cho bạn, cảm ơn đã theo dõi! Đừng quên để lại comment nếu muốn góp ý nha!