全屏实现js
全屏实现方法
使用JavaScript实现全屏功能可以通过Fullscreen API完成，该API允许网页元素以全屏模式显示。以下是几种常见的实现方式。
进入全屏模式
调用requestFullscreen方法可以使特定元素进入全屏模式。以下是一个示例代码：
const element = document.documentElement; // 整个页面
if (element.requestFullscreen) {
element.requestFullscreen();
} else if (element.webkitRequestFullscreen) { // Chrome, Safari, Opera
element.webkitRequestFullscreen();
} else if (element.msRequestFullscreen) { // IE/Edge
element.msRequestFullscreen();
}退出全屏模式
使用exitFullscreen方法可以退出全屏模式：
if (document.exitFullscreen) {
document.exitFullscreen();
} else if (document.webkitExitFullscreen) { // Chrome, Safari, Opera
document.webkitExitFullscreen();
} else if (document.msExitFullscreen) { // IE/Edge
document.msExitFullscreen();
}检查全屏状态
通过document.fullscreenElement可以检查当前是否有元素处于全屏状态：
const isFullscreen = !!document.fullscreenElement ||
!!document.webkitFullscreenElement ||
!!document.msFullscreenElement;
console.log(isFullscreen ? '全屏中' : '非全屏');全屏事件监听
可以监听全屏状态变化事件，以便在全屏模式切换时执行特定操作：
document.addEventListener('fullscreenchange', handleFullscreenChange);
document.addEventListener('webkitfullscreenchange', handleFullscreenChange);
document.addEventListener('msfullscreenchange', handleFullscreenChange);
function handleFullscreenChange() {
if (document.fullscreenElement ||
document.webkitFullscreenElement ||
document.msFullscreenElement) {
console.log('进入全屏');
} else {
console.log('退出全屏');
}
}针对特定元素全屏
可以将全屏功能绑定到按钮或特定元素上：
<button id="fullscreenBtn">切换全屏</button>
<div id="content">需要全屏显示的内容</div>
<script>
const btn = document.getElementById('fullscreenBtn');
const content = document.getElementById('content');
btn.addEventListener('click', () => {
if (!document.fullscreenElement) {
content.requestFullscreen().catch(err => {
console.error('全屏失败:', err);
});
} else {
document.exitFullscreen();
}
});
</script>浏览器兼容性注意事项
不同浏览器对Fullscreen API的实现可能存在差异，因此需要检查并处理兼容性问题。以下是一些常见浏览器的前缀：
- Chrome/Safari/Opera:
webkit - Firefox: 标准API（无前缀）
- IE/Edge:
ms
样式调整
在全屏模式下，可以通过CSS调整元素的显示方式。例如，设置全屏背景颜色：
:fullscreen, :-webkit-full-screen, :-ms-fullscreen {
background-color: #000;
}通过以上方法，可以实现灵活的全屏功能，并兼容大多数现代浏览器。
