js实现页面全屏展示
在JavaScript中,实现页面全屏展示可以通过调用requestFullscreen
方法。以下是一个简单的示例代码,展示了如何切换全屏模式:
function toggleFullScreen() {
if (!document.fullscreenElement) { // 不在全屏模式
document.documentElement.requestFullscreen();
} else { // 已在全屏模式
if (document.exitFullscreen) {
document.exitFullscreen();
}
}
}
// 绑定按钮点击事件
document.getElementById('fullscreen-button').addEventListener('click', toggleFullScreen);
HTML部分:
<button id="fullscreen-button">切换全屏</button>
这段代码定义了一个toggleFullScreen
函数,当按钮被点击时,会检查是否已经处于全屏模式,如果不是则进入全屏模式,如果是则退出全屏模式。需要注意的是,不同的浏览器可能需要前缀,例如webkitRequestFullScreen
、mozRequestFullScreen
等,但上述代码已经包含了对这些前缀的处理。
评论已关闭