超实用screenfull示例集：页面/元素/图片全屏实现一网打尽
项目地址: https://gitcode.com/gh_mirrors/sc/screenfull 你是否还在为网页全屏功能的浏览器兼容性头疼？是否想让视频、图片或数据可视化图表拥有更沉浸的展示效果？本文将通过7个实用场景示例，带你全面掌握screenfull.js的使用技巧，轻松实现各类全屏需求。读完本文你将学会：页面全屏切换、指定元素全屏、图片全屏查看、全屏状态监听等核心技能。
为什么选择screenfull.js？
screenfull.js是一个轻量级的JavaScript库，它解决了浏览器对Fullscreen API实现不一致的问题。通过封装不同浏览器的前缀方法（如webkit、moz、ms），提供了统一简洁的API接口。
// 核心API示例 [index.js](https://link.gitcode.com/i/3f5a5a5368847c5f92534211ca470014)
screenfull.request(); // 进入全屏
screenfull.exit(); // 退出全屏
screenfull.toggle(); // 切换全屏状态
screenfull.isFullscreen; // 判断是否全屏
screenfull.isEnabled; // 检查浏览器是否支持
基础环境准备
1. 安装与引入
通过npm安装：
npm install screenfull
或直接使用国内CDN：
<script src="https://cdn.bootcdn.net/ajax/libs/screenfull.js/6.0.2/screenfull.min.js"></script>
2. 兼容性检查
使用前务必检查浏览器支持情况：
if (screenfull.isEnabled) {
console.log('全屏功能可用');
} else {
alert('您的浏览器不支持全屏API');
}
实用场景示例
场景1：整页全屏切换
最常用的全屏功能，点击按钮切换整个页面的全屏状态：
<button id="toggle-fullscreen">切换全屏</button>
<script>
document.getElementById('toggle-fullscreen').addEventListener('click', () => {
if (screenfull.isEnabled) {
screenfull.toggle();
}
});
</script>
场景2：指定元素全屏
只让页面中的某个元素（如视频播放器、图表）进入全屏：
<div id="chart-container" style="width: 800px; height: 400px;">
<!-- 这里是图表内容 -->
</div>
<button onclick="toggleElementFullscreen()">图表全屏</button>
<script>
function toggleElementFullscreen() {
const container = document.getElementById('chart-container');
if (screenfull.isEnabled) {
screenfull.toggle(container);
}
}
</script>
场景3：图片全屏查看器
实现类似相册的图片全屏查看功能，点击图片放大，按ESC退出：
<img id="demo-img" src="path/to/your/image.jpg" style="max-width: 100%; cursor: zoom-in;">
<script>
document.getElementById('demo-img').addEventListener('click', function() {
if (screenfull.isEnabled) {
screenfull.toggle(this);
// 切换鼠标样式
this.style.cursor = screenfull.isFullscreen ? 'zoom-out' : 'zoom-in';
}
});
</script>
场景4：全屏状态监听
监听全屏状态变化，执行相应操作（如修改按钮文本）：
// 监听全屏变化事件 [index.js](https://link.gitcode.com/i/3f5a5a5368847c5f92534211ca470014#L120-L125)
screenfull.on('change', () => {
const button = document.getElementById('toggle-fullscreen');
button.textContent = screenfull.isFullscreen ? '退出全屏' : '进入全屏';
// 全屏时隐藏某些元素
document.getElementById('header').style.display = screenfull.isFullscreen ? 'none' : 'block';
});
// 监听全屏错误
screenfull.on('error', (e) => {
console.error('全屏操作失败:', e);
});
场景5：全屏控制按钮状态管理
根据当前状态动态更新控制按钮：
<button id="fullscreen-btn" disabled>进入全屏</button>
<script>
const button = document.getElementById('fullscreen-btn');
// 检查支持性并启用按钮
if (screenfull.isEnabled) {
button.disabled = false;
// 初始状态设置
updateButtonText();
// 监听状态变化
screenfull.on('change', updateButtonText);
}
function updateButtonText() {
button.textContent = screenfull.isFullscreen ? '退出全屏' : '进入全屏';
}
button.addEventListener('click', () => screenfull.toggle());
</script>
场景6：全屏选项配置
传递选项参数控制全屏行为（如视频全屏时显示控件）：
// 视频元素全屏示例
const video = document.getElementById('my-video');
document.getElementById('video-fullscreen').addEventListener('click', () => {
if (screenfull.isEnabled) {
screenfull.request(video, {
navigationUI: 'show' // 显示导航UI
});
}
});
场景7：全屏快捷键实现
结合键盘事件实现自定义全屏快捷键（如按F11切换全屏）：
document.addEventListener('keydown', (e) => {
// F11键切换全屏
if (e.key === 'F11' && screenfull.isEnabled) {
e.preventDefault(); // 阻止浏览器默认F11行为
screenfull.toggle();
}
// ESC键退出全屏（部分浏览器默认支持）
if (e.key === 'Escape' && screenfull.isFullscreen) {
screenfull.exit();
}
});
常见问题解决方案
问题1：全屏请求被拒绝
原因：浏览器安全策略要求全屏操作必须由用户交互触发（如点击事件内）。
解决：确保所有全屏请求都在用户交互回调中执行：
// 错误示例：不在用户交互中调用
setTimeout(() => {
screenfull.request(); // 会被浏览器拒绝
}, 1000);
// 正确示例：在点击事件中调用
document.getElementById('btn').addEventListener('click', () => {
screenfull.request(); // 正常工作
});
问题2：iframe中的全屏
解决：需要在iframe标签添加allowfullscreen属性：
<iframe src="player.html" allowfullscreen></iframe>
项目文件说明
- 核心文件：index.js - screenfull库的主要实现
- 类型定义：index.d.ts - TypeScript类型声明
- 示例页面：index.html - 官方演示页面
- 许可证：license - MIT许可证
总结与扩展
screenfull.js通过简洁的API解决了全屏功能的浏览器兼容性问题，让开发者可以轻松实现各种全屏场景。无论是图片查看器、视频播放器还是数据可视化界面，合理使用全屏功能都能显著提升用户体验。
建议结合项目需求，实现更多创新交互，如：全屏模式下的手势控制、多元素全屏切换、全屏状态下的动画过渡等。如有疑问，可查阅官方文档或查看源码实现。
希望本文的示例能帮助你更好地掌握screenfull.js的使用，为你的项目增添更专业的全屏体验！
创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
