JS实现全屏功能的几种方法及代码示例
在文章实战开发的过程中，我们经常会遇到一些这样那样的问题，然后要卡好半天，等问题解决了才发现原来一些细节知识点还是没有掌握好。今天golang学习网就整理分享《JS实现全屏功能的方法及代码示例》，聊聊，希望可以帮助到正在努力赚钱的你。
JavaScript实现全屏功能的核心是调用DOM元素的requestFullscreen()方法并配合document.exitFullscreen()退出全屏，1. 首先通过用户手势触发全屏操作，调用目标元素的requestFullscreen()方法，并兼容不同浏览器前缀如webkitRequestFullscreen、mozRequestFullScreen、msRequestFullscreen；2. 退出全屏时调用document.exitFullscreen()及其对应前缀方法；3. 监听fullscreenchange事件及其前缀版本以响应全屏状态变化；4. 使用document.fullscreenElement或其前缀属性判断当前全屏状态；5. 通过CSS的::fullscreen伪类及前缀调整全屏样式；6. 确保iframe全屏时设置allowfullscreen属性；7. 遵守浏览器安全限制，全屏操作必须由用户手势触发，防止被阻止。该方案完整覆盖兼容性、用户体验与安全性，确保功能稳定运行。
JavaScript实现全屏功能，核心在于调用DOM元素的requestFullscreen()方法，并配合document.exitFullscreen()来退出。这并不是一个特别复杂的API，但要做到兼容性和用户体验兼顾，还是有些细节需要琢磨的。
解决方案
要让一个元素进入全屏模式，最直接的办法就是找到这个DOM元素，然后调用它的requestFullscreen()方法。而要退出全屏，则需要调用document.exitFullscreen()。这里面涉及到一些浏览器前缀和事件监听，所以通常我们会封装一下。
一个基本的全屏切换函数可以这样写：
function toggleFullscreen(element) {
if (!document.fullscreenElement) { // 检查当前是否有元素处于全屏状态
// 尝试进入全屏
if (element.requestFullscreen) {
element.requestFullscreen();
} else if (element.webkitRequestFullscreen) { /* Safari */
element.webkitRequestFullscreen();
} else if (element.msRequestFullscreen) { /* IE11 */
element.msRequestFullscreen();
} else if (element.mozRequestFullScreen) { /* Firefox */
element.mozRequestFullScreen();
}
} else {
// 尝试退出全屏
if (document.exitFullscreen) {
document.exitFullscreen();
} else if (document.webkitExitFullscreen) { /* Safari */
document.webkitExitFullscreen();
} else if (document.msExitFullscreen) { /* IE11 */
document.msExitFullscreen();
} else if (document.mozCancelFullScreen) { /* Firefox */
document.mozCancelFullScreen();
}
}
}
// 示例：点击按钮让某个div全屏
document.addEventListener('DOMContentLoaded', () => {
const targetElement = document.getElementById('myVideoContainer') || document.body; // 或者任何你想要全屏的元素
const fullscreenButton = document.getElementById('fullscreenBtn');
if (fullscreenButton) {
fullscreenButton.addEventListener('click', () => {
toggleFullscreen(targetElement);
});
}
// 监听全屏状态变化，以便更新UI或执行其他逻辑
document.addEventListener('fullscreenchange', () => {
console.log('全屏状态改变了！当前是否全屏:', document.fullscreenElement ? '是' : '否');
// 可以在这里更新按钮文本，或者调整页面布局
});
// 兼容性监听
document.addEventListener('webkitfullscreenchange', () => console.log('WebKit全屏状态改变'));
document.addEventListener('mozfullscreenchange', () => console.log('Mozilla全屏状态改变'));
document.addEventListener('MSFullscreenChange', () => console.log('MS全屏状态改变'));
});HTML结构大概是这样：
<div id="myVideoContainer" style="background-color: #f0f0f0; width: 300px; height: 200px; display: flex; justify-content: center; align-items: center; border: 1px solid #ccc;">
<p>这是一个可全屏的区域</p>
</div>
<button id="fullscreenBtn" style="margin-top: 10px; padding: 10px 15px; cursor: pointer;">切换全屏</button>这段代码展示了如何通过点击事件触发全屏，并监听全屏状态的变化。记住，全屏操作必须由用户手势（比如点击按钮）触发，浏览器为了安全通常会阻止脚本直接调用全屏API。
处理浏览器兼容性，确保全屏功能在不同浏览器中稳定运行
提到浏览器兼容性，这简直是前端开发者的“家常便饭”。全屏API也逃不过这个魔咒，早期的浏览器实现各自为政，导致我们需要写一堆前缀代码。
比如，Firefox用的是mozRequestFullScreen，WebKit内核（Chrome、Safari）用webkitRequestFullscreen，IE11是msRequestFullscreen。好在现在大多数现代浏览器都开始支持无前缀的requestFullscreen()和exitFullscreen()了，但为了覆盖更广的用户群，那些带前缀的写法还是不能丢。
我个人习惯是，先尝试标准API，如果不行，再依次尝试带前缀的。就像上面代码里展示的那样，一个if-else if链条就能搞定。
还有一个很重要的点是事件监听。当全屏状态改变时，浏览器会触发fullscreenchange事件。同样，这个事件也有前缀版本：webkitfullscreenchange、mozfullscreenchange和MSFullscreenChange。监听这些事件能让你在全屏模式切换时执行一些逻辑，比如调整UI布局、隐藏不必要的元素或者改变按钮的文本。
例如，你可以根据document.fullscreenElement来判断当前是否有元素处于全屏状态。如果它不为null，就表示有元素全屏了。这个属性也是有前缀的，比如document.webkitFullscreenElement。所以，一个健壮的判断全屏状态的函数可能长这样：
function isFullscreen() {
return document.fullscreenElement ||
document.webkitFullscreenElement ||
document.mozFullScreenElement ||
document.msFullscreenElement;
}这样一套组合拳下来，基本上能覆盖主流浏览器的全屏需求了。
全屏模式下的用户体验优化与常见问题规避
全屏功能虽然酷炫，但如果处理不好，用户体验可能会大打折扣。
一个最常见的问题就是：用户不知道怎么退出全屏。虽然按下ESC键是退出全屏的通用操作，但不是所有用户都清楚。所以，在全屏模式下，最好能在UI上提供一个显眼的“退出全屏”按钮。这个按钮可以是一个小的、浮动的图标，或者在用户鼠标移动到屏幕边缘时才显示出来。
另一个值得注意的细节是CSS样式。当元素进入全屏模式后，它会占据整个视口。这时候，你可能需要针对全屏状态下的元素应用特定的CSS样式。CSS提供了一个伪类::fullscreen`来帮助我们。例如：
#myVideoContainer:fullscreen {
width: 100vw; /* 视口宽度 */
height: 100vh; /* 视口高度 */
background-color: black; /* 全屏时背景变黑 */
display: flex;
justify-content: center;
align-items: center;
/* 确保内容居中，或者根据需要调整 */
}
/* 兼容性前缀 */
#myVideoContainer:-webkit-full-screen { /* Chrome, Safari */
width: 100vw;
height: 100vh;
background-color: black;
}
#myVideoContainer:-moz-full-screen { /* Firefox */
width: 100vw;
height: 100vh;
background-color: black;
}
#myVideoContainer:-ms-fullscreen { /* IE11 */
width: 100vw;
height: 100vh;
background-color: black;
}通过这些伪类，你可以控制全屏时的布局、背景色等，确保内容在全屏状态下也能完美呈现。我经常看到一些网站在全屏视频时，视频本身全屏了，但周围却留着白边或者奇怪的背景色，这就是没有充分利用::fullscreen`伪类的结果。
此外，还要考虑全屏时的交互。比如，如果全屏的是一个视频播放器，那么播放、暂停、进度条等控制按钮在全屏模式下是否还能方便操作？通常，这些控件在全屏时会浮动在视频上方，并在用户不操作一段时间后自动隐藏。这都是提升用户体验的细节。
全屏API的安全性考量与浏览器限制
全屏API并非没有限制，这主要是出于安全和用户体验的考虑。
首先，也是最重要的一点：requestFullscreen()方法必须在用户手势（如点击、触摸）事件的事件处理函数中调用。这意味着你不能在页面加载时就直接让某个元素全屏，也不能在计时器或网络请求回调中突然触发全屏。浏览器会阻止这种“未经同意”的全屏行为，防止恶意网站劫持用户的屏幕。如果你尝试在非用户手势事件中调用，通常会抛出一个NotAllowedError。
其次，并不是所有元素都能全屏。只有特定的元素类型，比如