JavaScript 实现页面全屏效果 - 完整指南

要实现进入页面全屏效果，可以使用 JavaScript 的 Fullscreen API。\n\n首先，需要找到进入全屏的按钮，例如一个按钮元素或者页面的某个区域。然后，在按钮上添加一个点击事件的监听器。\n\n在点击事件的处理函数中，使用 Fullscreen API 的 requestFullscreen 方法来请求进入全屏模式。这个方法需要在一个元素上调用，以指定进入全屏的元素。\n\n以下是一个简单的示例代码：\n\nHTML:\nhtml\n<button id="fullscreenButton">进入全屏</button>\n\n\nJavaScript:\njavascript\nvar fullscreenButton = document.getElementById('fullscreenButton');\n\nfullscreenButton.addEventListener('click', function() {\n var element = document.documentElement; // 进入全屏的元素，这里使用整个文档元素\n\n if (element.requestFullscreen) {\n element.requestFullscreen();\n } else if (element.mozRequestFullScreen) { // Firefox\n element.mozRequestFullScreen();\n } else if (element.webkitRequestFullscreen) { // Chrome, Safari and Opera\n element.webkitRequestFullscreen();\n } else if (element.msRequestFullscreen) { // IE/Edge\n element.msRequestFullscreen();\n }\n});\n\n\n这样，当点击按钮时，页面就会进入全屏模式。请注意，不同浏览器对 Fullscreen API 的支持可能有所不同，因此需要使用适当的前缀来调用相应的方法。