JS全屏实现：四种高效方法解析

本文将介绍如何使用JavaScript（包括jQuery）实现网页全屏功能，并提供四种不同的实现方法。示例代码包括HTML结构、CSS样式以及JavaScript事件监听器。 ### 方法一：纯JavaScript实现全屏功能 #### HTML 结构 ```html <div class="container"> <button id="full-screen">全屏</button> <button id="exit-fullscreen">退出</button> </div> ``` #### CSS 样式 ```css html { color: #000; background: paleturquoise; min-height: 100%; } .container { text-align: center; width: 500px; min-height: 600px; background: #fff; border: 1px solid #ccc; border-top: none; margin: 20px auto; padding: 20px; border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; box-shadow: 1px 1px 10px #000; -moz-box-shadow: 1px 1px 10px #000; -webkit-box-shadow: 1px 1px 5px #000; } button { margin: 200px auto; width: 100px; height: 30px; background-color: aliceblue; } /* 全屏样式 */ html:-moz-full-screen { background: blue; } html:-webkit-full-screen { background: blue; } html:-ms-fullscreen { background: blue; width: 100%; /* 需要在IE中居中内容 */ } html:fullscreen { background: blue; } ``` #### JavaScript 事件监听 ```javascript (function() { var viewFullScreen = document.getElementById("full-screen"); if (viewFullScreen) { viewFullScreen.addEventListener("click", function() { if (document.fullscreenElement || document.webkitFullscreenElement || document.mozFullScreenElement || document.msFullscreenElement) { if (document.exitFullscreen) { document.exitFullscreen(); } else if (document.webkitExitFullscreen) { document.webkitExitFullscreen(); } else if (document.mozCancelFullScreen) { document.mozCancelFullScreen(); } else if (document.msExitFullscreen) { document.msExitFullscreen(); } } else { var elem = document.documentElement; if (elem.requestFullscreen) { elem.requestFullscreen(); } else if (elem.webkitRequestFullscreen) { elem.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT); } else if (elem.mozRequestFullScreen) { elem.mozRequestFullScreen(); } else if (elem.msRequestFullscreen) { elem.msRequestFullscreen(); } } }); } var exitFullScreen = document.getElementById("exit-fullscreen"); if (exitFullScreen) { exitFullScreen.addEventListener("click", function() { // 退出全屏的逻辑与上面相同，可以复用 }); } })(); ``` ### 方法二：jQuery 实现全屏功能 使用jQuery库，你可以简化事件监听和DOM操作。以下是一个简单的jQuery实现： ```javascript $(document).ready(function() { $("#full-screen").on("click", function() { var elem = $("html")[0]; if (elem.requestFullscreen) { elem.requestFullscreen(); } else if (elem.webkitRequestFullscreen) { elem.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT); } else if (elem.mozRequestFullScreen) { elem.mozRequestFullScreen(); } else if (elem.msRequestFullscreen) { elem.msRequestFullscreen(); } }); $("#exit-fullscreen").on("click", function() { if (document.exitFullscreen) { document.exitFullscreen(); } else if (document.webkitExitFullscreen) { document.webkitExitFullscreen(); } else if (document.mozCancelFullScreen) { document.mozCancelFullScreen(); } else if (document.msExitFullscreen) { document.msExitFullscreen(); } }); }); ``` ### 方法三：使用浏览器API（Fullscreen API） 浏览器提供了原生的`Fullscreen API`，允许开发者控制元素进入或退出全屏模式。在JavaScript中，可以使用`element.requestFullscreen()`来请求全屏，`document.exitFullscreen()`来退出全屏。 ### 方法四：结合CSS和JavaScript 结合CSS伪类`:fullscreen`和JavaScript，你可以改变元素在全屏状态下的样式。例如，当元素处于全屏状态时，可以更改背景颜色或布局。 以上四种方法都能实现全屏功能，但需要注意兼容性问题，尤其是对于旧版本的浏览器。通常，你需要使用多种方法来覆盖所有可能的情况，确保在大部分浏览器中都能正常工作。在实际应用中，记得添加错误处理机制，以应对可能出现的异常情况。