Làm thế nào để xem trang web toàn màn hình sử dụng jQuery và HTML5 API

Bước 1: Bao gồm jQuery.js và Font ảnh vui nhộn Scripts trong Header

Bao gồm các kịch bản bên dưới trong thẻ tiêu đề của bạn

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="//use.fontawesome.com/aa03aaad2f.js"></script>

HTML code

<a href="javascript:;" class="fullscreen-toggle"><i class="fa fa-arrows-alt"></i> View Fullscreen</a>

jQuery và HTML4 mã API để kích hoạt toàn màn hình

$(".fullscreen-toggle").on("click", function() {
document.fullScreenElement && null !== document.fullScreenElement || !document.mozFullScreen && !document.webkitIsFullScreen ? document.documentElement.requestFullScreen ? document.documentElement.requestFullScreen() : document.documentElement.mozRequestFullScreen ? document.documentElement.mozRequestFullScreen() : document.documentElement.webkitRequestFullScreen && document.documentElement.webkitRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT) : document.cancelFullScreen ? document.cancelFullScreen() : document.mozCancelFullScreen ? document.mozCancelFullScreen() : document.webkitCancelFullScreen && document.webkitCancelFullScreen()
});

Demo

 

Thêm bình luận
0 Trả lời

Trả lời của bạn

Bằng cách gửi bài trả lời của bạn, bạn đồng ý với Chính sách bảo mậtđiều khoản dịch vụ.