js 实现全屏
使用全屏 API 实现全屏
现代浏览器提供了 Fullscreen API，可以通过 JavaScript 控制元素进入或退出全屏模式。
// 进入全屏
function enterFullscreen(element) {
if (element.requestFullscreen) {
element.requestFullscreen();
} else if (element.webkitRequestFullscreen) { /* Safari */
element.webkitRequestFullscreen();
} else if (element.msRequestFullscreen) { /* IE11 */
element.msRequestFullscreen();
}
}
// 退出全屏
function exitFullscreen() {
if (document.exitFullscreen) {
document.exitFullscreen();
} else if (document.webkitExitFullscreen) { /* Safari */
document.webkitExitFullscreen();
} else if (document.msExitFullscreen) { /* IE11 */
document.msExitFullscreen();
}
}
// 检查全屏状态
function isFullscreen() {
return !!(document.fullscreenElement ||
document.webkitFullscreenElement ||
document.msFullscreenElement);
}监听全屏状态变化
可以添加事件监听器来响应全屏状态的变化。
document.addEventListener('fullscreenchange', handleFullscreenChange);
document.addEventListener('webkitfullscreenchange', handleFullscreenChange); // Safari
document.addEventListener('MSFullscreenChange', handleFullscreenChange); // IE
function handleFullscreenChange() {
if (isFullscreen()) {
console.log('进入全屏模式');
} else {
console.log('退出全屏模式');
}
}全屏样式调整
在全屏模式下，可以使用 CSS 伪类 :fullscreen 为全屏元素添加特殊样式。
:fullscreen, :-webkit-full-screen, :-ms-fullscreen {
background-color: white;
width: 100%;
height: 100%;
}兼容性注意事项
Fullscreen API 在不同浏览器中存在前缀差异：
- 标准：
requestFullscreen、exitFullscreen、fullscreenElement - WebKit (Safari/Chrome)：
webkitRequestFullscreen、webkitExitFullscreen、webkitFullscreenElement - Microsoft (IE/Edge)：
msRequestFullscreen、msExitFullscreen、msFullscreenElement
实际应用示例
以下是一个完整的全屏切换按钮实现：
<button id="fullscreen-btn">切换全屏</button>
<div id="content">全屏内容区域</div>
<script>
const btn = document.getElementById('fullscreen-btn');
const content = document.getElementById('content');
btn.addEventListener('click', () => {
if (isFullscreen()) {
exitFullscreen();
} else {
enterFullscreen(content);
}
});
function enterFullscreen(element) {
const requestMethod = element.requestFullscreen ||
element.webkitRequestFullscreen ||
element.msRequestFullscreen;
requestMethod.call(element);
}
function exitFullscreen() {
const exitMethod = document.exitFullscreen ||
document.webkitExitFullscreen ||
document.msExitFullscreen;
exitMethod.call(document);
}
function isFullscreen() {
return !!(document.fullscreenElement ||
document.webkitFullscreenElement ||
document.msFullscreenElement);
}
</script>移动端注意事项
在移动设备上，某些浏览器可能限制全屏功能，特别是 iOS Safari。某些情况下需要通过添加到主屏幕或使用特定 meta 标签来启用类似全屏的功能：
<meta name="apple-mobile-web-app-capable" content="yes">
