Jquery实现前端窗口得全屏/退出全屏得切换
warning:
这篇文章距离上次修改已过274天，其中的内容可能已经有所变动。
在现代浏览器中，可以使用全屏 API 来实现全屏模式的切换。以下是使用 jQuery 结合全屏 API 实现全屏切换的示例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>全屏切换示例</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
$('#toggleFullScreen').click(function() {
if (!document.fullscreenElement) {
// 进入全屏
document.documentElement.requestFullscreen();
} else {
// 退出全屏
if (document.exitFullscreen) {
document.exitFullscreen();
}
}
});
});
</script>
</head>
<body>
<button id="toggleFullScreen">切换全屏</button>
</body>
</html>这段代码中，我们定义了一个按钮，当用户点击这个按钮时，会触发全屏模式的切换。通过检查 document.fullscreenElement 来判断当前是否已经是全屏状态，然后使用 requestFullscreen() 方法进入全屏，或者 exitFullscreen 方法退出全屏。
评论已关闭