在開發網頁的過程中,可能會有需要全屏顯示網頁的情況,而jquery提供了方便實現全屏顯示的方法。今天我們就來學習如何利用jquery實現網頁進入F11全屏的功能。
首先,在
標簽中引入jquery庫文件:<script src="https://cdn.bootcss.com/jquery/3.5.1/jquery.min.js"></script>
然后,在
標簽中的javascript代碼塊中,使用以下代碼實現進入F11全屏:$(document).keypress(function (e) { if (e.which === 70) { if (!document.fullscreenElement && !document.mozFullScreenElement && !document.webkitFullscreenElement && !document.msFullscreenElement) { if (document.documentElement.requestFullscreen) { document.documentElement.requestFullscreen(); } else if (document.documentElement.msRequestFullscreen) { document.documentElement.msRequestFullscreen(); } else if (document.documentElement.mozRequestFullScreen) { document.documentElement.mozRequestFullScreen(); } else if (document.documentElement.webkitRequestFullscreen) { document.documentElement.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT); } } } });
代碼中的$(document).keypress()將監聽鍵盤輸入,當輸入的鍵值為70(即F鍵)時,判斷當前是否處于全屏狀態,若不是,則利用各瀏覽器私有接口將網頁全屏。同時,注意各瀏覽器私有接口的區別和兼容性問題。
有了以上代碼,我們就可以通過F鍵輕松進入全屏模式了。
上一篇css強制取消賦值
下一篇css彈窗顯示常用效果