- Hey, 我是 沉浸式趣谈
- 本文首发于 [沉浸式趣谈] ，我的个人博客 https://yaolifeng.com 也同步更新。
- 转载请在文章开头注明出处和版权信息。
- 如果本文对您有所帮助，请点赞、评论、转发，支持一下，谢谢！
如何原生实现让任意 div 全屏展示
最近在做一个项目，需要实现点击按钮让某个 div 全屏展示的功能。
第一反应是用 CSS 设置 position: fixed 加上宽高 100%，但这样并不是真正的全屏，因为浏览器的工具栏还在。
后来发现浏览器原生就提供了 Fullscreen API ，可以让任意元素真正全屏展示，今天就来聊聊这个有趣的 API 。
基础用法：让元素全屏
先来看最简单的使用方式。假设我们有一个文章阅读器，想让用户能够专注阅读：
<div id="reader">
<article>
<h1>一篇很棒的文章</h1>
<p>这是文章的正文内容...</p>
</article>
<button id="fullscreenBtn">
<span>进入阅读模式</span>
<svg viewBox="0 0 24 24" width="16" height="16">
<path d="M7 14H5v5h5v-2H7v-3zm-2-4h2V7h3V5H5v5zm12 7h-3v2h5v-5h-2v3zM14 5v2h3v3h2V5h-5z" />
</svg>
</button>
</div>
<script>
const reader = document.getElementById('reader');
const fullscreenBtn = document.getElementById('fullscreenBtn');
fullscreenBtn.addEventListener('click', () => {
// 请求全屏
reader.requestFullscreen().catch(err => {
console.log('全屏展示失败:', err);
});
});
</script>
<style>
#reader {
max-width: 800px;
margin: 0 auto;
padding: 20px;
background: #fff;
}
#fullscreenBtn {
display: flex;
align-items: center;
gap: 5px;
padding: 8px 16px;
border: none;
background: #f0f0f0;
cursor: pointer;
border-radius: 4px;
}
#fullscreenBtn:hover {
background: #e0e0e0;
}
</style>
就这么简单！调用元素的 requestFullscreen() 方法就能让它全屏展示了。不过要注意，这是个异步操作，返回的是 Promise ，所以最好加上 catch 来处理可能的错误。
退出全屏怎么搞？
有进就要有出。退出全屏的方法也很简单，但这里有个小坑：退出全屏的方法是在 document 上调用，而不是在元素上：
// 错误示范 ❌
reader.exitFullscreen();
// 正确方式 ✅
document.exitFullscreen().catch(err => {
console.log('退出全屏失败:', err);
});
来看个完整的示例，实现全屏切换功能：
<!DOCTYPE html>
<html>
<head>
<title>阅读模式切换示例</title>
<style>
#reader {
max-width: 800px;
margin: 20px auto;
padding: 30px;
background: #fff;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
#reader.dark-mode {
background: #1a1a1a;
color: #fff;
}
#toggleBtn {
display: flex;
align-items: center;
gap: 5px;
padding: 8px 16px;
border: none;
background: #f0f0f0;
cursor: pointer;
border-radius: 4px;
margin: 20px 0;
}
#toggleBtn:hover {
background: #e0e0e0;
}
/* 全屏时的样式 */
#reader:fullscreen {
padding: 50px;
max-width: none;
box-shadow: none;
}
#reader:fullscreen #toggleBtn {
position: fixed;
top: 20px;
right: 20px;
background: rgba(240, 240, 240, 0.8);
}
</style>
</head>
<body>
<div id="reader">
<article>
<h1>深入理解 JavaScript 闭包</h1>
<p>闭包是 JavaScript 中最强大的特性之一，它允许函数访问其词法作用域之外的变量...</p>
<p
>让我们通过一个简单的例子来理解闭包：当我们创建一个函数时，它不仅包含函数的代码，还包含对其周围作用域中变量的引用...</p
>
<p>这种特性使得我们可以创建私有变量、数据封装，以及实现模块化的代码结构...</p>
</article>
<button id="toggleBtn">
<span>切换阅读模式</span>
<svg viewBox="0 0 24 24" width="16" height="16">
<path d="M7 14H5v5h5v-2H7v-3zm-2-4h2V7h3V5H5v5zm12 7h-3v2h5v-5h-2v3zM14 5v2h3v3h2V5h-5z" />
</svg>
</button>
</div>
<script>
const reader = document.getElementById('reader');
const toggleBtn = document.getElementById('toggleBtn');
const btnText = toggleBtn.querySelector('span');
toggleBtn.addEventListener('click', () => {
if (!document.fullscreenElement) {
// 当前不是全屏，进入全屏
reader
.requestFullscreen()
.then(() => {
btnText.textContent = '退出阅读模式';
reader.classList.add('dark-mode');
})
.catch(err => {
console.log('进入全屏失败:', err);
});
} else {
// 当前是全屏，退出全屏
document
.exitFullscreen()
.then(() => {
btnText.textContent = '切换阅读模式';
reader.classList.remove('dark-mode');
})
.catch(err => {
console.log('退出全屏失败:', err);
});
}
});
</script>
</body>
</html>
全屏状态的监听和样式调整
有时候我们需要知道元素是否处于全屏状态，比如要在全屏时显示不同的 UI 。浏览器提供了 fullscreenchange 事件来监听全屏状态的变化：
document.addEventListener('fullscreenchange', () => {
if (document.fullscreenElement) {
console.log('进入全屏啦！');
console.log('全屏的元素是：', document.fullscreenElement);
} else {
console.log('退出全屏啦！');
}
});
CSS 中也有专门的选择器 :fullscreen 来设置元素在全屏时的样式：
#player {
background: #f0f0f0;
padding: 20px;
}
/* 全屏时的样式 */
#player:fullscreen {
background: #000;
padding: 50px;
}
实战示例：图片查看器
来做个实用的例子 —— 点击图片查看大图，再点击退出全屏：
<!DOCTYPE html>
<html>
<head>
<title>图片查看器</title>
<style>
.image-viewer {
cursor: pointer;
/* 使用 flex 布局让提示文字在图片下方 */
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
}
.image-viewer img {
max-width: 300px;
transition: transform 0.3s;
}
/* 提示文字样式 */
.image-viewer .hint {
color: #666;
font-size: 14px;
padding: 8px;
background: #f5f5f5;
border-radius: 4px;
display: flex;
align-items: center;
gap: 5px;
}
/* 添加一个小图标 */
.hint svg {
width: 16px;
height: 16px;
fill: #666;
}
.image-viewer:fullscreen {
background: rgba(0, 0, 0, 0.9);
display: flex;
align-items: center;
justify-content: center;
}
.image-viewer:fullscreen img {
max-width: 90vw;
max-height: 90vh;
object-fit: contain;
}
/* 全屏时隐藏提示文字 */
.image-viewer:fullscreen .hint {
display: none;
}
</style>
</head>
<body>
<div class="image-viewer" id="imageViewer">
<img src="your-image.jpg" alt="示例图片" />
<div class="hint">
<svg viewBox="0 0 24 24">
<path d="M7 14H5v5h5v-2H7v-3zm-2-4h2V7h3V5H5v5zm12 7h-3v2h5v-5h-2v3zM14 5v2h3v3h2V5h-5z" />
</svg>
<span>点击图片可全屏查看</span>
</div>
</div>
<script>
const imageViewer = document.getElementById('imageViewer');
imageViewer.addEventListener('click', e => {
// 如果点击的是提示文字，不触发全屏
if (e.target.closest('.hint')) return;
if (!document.fullscreenElement) {
imageViewer.requestFullscreen().catch(err => {
console.log('进入全屏失败:', err);
});
} else {
document.exitFullscreen().catch(err => {
console.log('退出全屏失败:', err);
});
}
});
</script>
</body>
</html>
浏览器兼容性处理
虽然现代浏览器都支持 Fullscreen API ，但有些老浏览器可能需要加前缀。这里提供一个兼容性更好的封装：
function requestFullscreen(element) {
const requestMethod =
element.requestFullscreen ||
element.webkitRequestFullscreen || // Chrome, Safari
element.mozRequestFullScreen || // Firefox
element.msRequestFullscreen; // IE/Edge
if (requestMethod) {
return requestMethod.call(element);
}
return Promise.reject('当前浏览器不支持全屏 API');
}
function exitFullscreen() {
const exitMethod =
document.exitFullscreen ||
document.webkitExitFullscreen ||
document.mozCancelFullScreen ||
document.msExitFullscreen;
if (exitMethod) {
return exitMethod.call(document);
}
return Promise.reject('当前浏览器不支持全屏 API');
}
// 判断是否支持全屏
function isFullscreenEnabled() {
return (
document.fullscreenEnabled ||
document.webkitFullscreenEnabled ||
document.mozFullScreenEnabled ||
document.msFullscreenEnabled
);
}
// 获取当前全屏元素
function getFullscreenElement() {
return (
document.fullscreenElement ||
document.webkitFullscreenElement ||
document.mozFullScreenElement ||
document.msFullscreenElement
);
}
使用封装后的方法：
const myElement = document.getElementById('myElement');
// 检查是否支持全屏
if (!isFullscreenEnabled()) {
console.log('抱歉，您的浏览器不支持全屏功能');
return;
}
// 进入全屏
requestFullscreen(myElement).catch(err => {
console.log('进入全屏失败:', err);
});
// 退出全屏
exitFullscreen().catch(err => {
console.log('退出全屏失败:', err);
});
一些注意事项
-
全屏请求必须由用户触发 浏览器出于安全考虑，
requestFullscreen()必须由用户操作触发（如点击事件），不能在页面加载时自动触发。 -
iframe 的全屏限制 如果要在 iframe 中使用全屏功能，需要给 iframe 添加
allowfullscreen属性：<iframe src="page.html" allowfullscreen></iframe> -
全屏元素的样式 进入全屏后，元素默认会占满整个屏幕。如果想保持原有布局，需要自己设置合适的样式。
-
键盘事件 在全屏模式下，某些键盘快捷键可能会被浏览器接管（如 ESC 退出全屏），要注意这一点。
总结
Fullscreen API 虽然看起来简单，但用好了真的很强大。关键点：
element.requestFullscreen()进入全屏document.exitFullscreen()退出全屏fullscreenchange事件监听状态变化:fullscreen选择器设置全屏样式- 注意浏览器兼容性处理
希望这篇文章对你有帮助！如果觉得不错，别忘了点个赞 👍
Select Language