JS实现指定区域的全屏显示功能示例

最新推荐文章于 2023-11-25 22:29:12 发布

转载最新推荐文章于 2023-11-25 22:29:12 发布 · 313 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://www.jb51.net/article/160216.htm

文章标签：

#javascript #html #jquery

本文介绍了一种使用JavaScript实现网页中指定区域全屏显示的方法。通过监听按钮点击事件，判断当前是否处于全屏状态，利用浏览器提供的API进行全屏切换。代码兼容多种浏览器，包括对webkit、moz、ms等前缀的API调用。

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>www.jb51.net js指定区域全屏</title>
<style>
#fulldiv {
background: #fff;
width: 100%;
text-align: center;
height: 100%;
}
</style>
</head>
<body>
<h1>指定区域全屏测试</h1>
<button id="btn">全屏按钮</button>
<div id="fulldiv">
<h1>这里是全屏显示的内容</h1>
</div>
</body>
<script>
var fullscreen = false;
let btn = document.getElementById('btn');
let fullarea = document.getElementById('fulldiv')
btn.addEventListener('click',function(){
if (fullscreen) { // 退出全屏
if (document.exitFullscreen) {
document.exitFullscreen();
} else if (document.webkitCancelFullScreen) {
document.webkitCancelFullScreen();
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if (document.msExitFullscreen) {
document.msExitFullscreen();
}
} else { // 进入全屏
if (fullarea.requestFullscreen) {
fullarea.requestFullscreen();
} else if (fullarea.webkitRequestFullScreen) {
fullarea.webkitRequestFullScreen();
} else if (fullarea.mozRequestFullScreen) {
fullarea.mozRequestFullScreen();
} else if (fullarea.msRequestFullscreen) {
// IE11
fullarea.msRequestFullscreen();
}
}
fullscreen = !fullscreen;
})
</script>
</html>