全屏功能需封装跨浏览器兼容的javascript逻辑。标准api为requestfullscreen，webkit内核用webkitrequestfullscreen，firefox用mozrequestfullscreen，ie/edge旧版用msrequestfullscreen；退出方法对应exitfullscreen、webkitexitfullscreen、mozcancelfullscreen、msexitfullscreen；监听fullscreenchange事件时需注册带前缀版本；通过document.fullscreenelement判断状态；注意全屏须由用户手势触发，移动端支持有限，iframe需设置allow="fullscreen"属性。
在现代网页开发中，全屏功能常用于视频播放、游戏或数据展示场景。JavaScript提供了进入和退出全屏的API，但不同浏览器对全屏控制的实现方式存在差异。为确保跨浏览器兼容性，需要封装统一的处理逻辑。
全屏API的浏览器差异
原生全屏API（Fullscreen API）已被大多数现代浏览器支持，但部分旧版本浏览器仍需使用前缀或替代方法：
- 标准API：element.requestFullscreen()
- Webkit内核（Chrome/Safari）：element.webkitRequestFullscreen()
- Firefox：element.mozRequestFullScreen()
- IE/Edge旧版：element.msRequestFullscreen()
退出全屏同样存在对应的方法差异，需一一适配。
封装跨浏览器全屏函数
通过检测元素支持的方法，调用对应的全屏请求：
立即学习“Java免费学习笔记（深入）”；
function enterFullscreen(element) {
element = element || document.documentElement;
if (element.requestFullscreen) {
element.requestFullscreen();
} else if (element.webkitRequestFullscreen) {
element.webkitRequestFullscreen();
} else if (element.mozRequestFullScreen) {
element.mozRequestFullScreen();
} else if (element.msRequestFullscreen) {
element.msRequestFullscreen();
}
}
退出全屏操作作用于document：
function exitFullscreen() {
if (document.exitFullscreen) {
document.exitFullscreen();
} else if (document.webkitExitFullscreen) {
document.webkitExitFullscreen();
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if (document.msExitFullscreen) {
document.msExitFullscreen();
}
}
监听全屏状态变化
全屏状态改变时会触发fullscreenchange事件，注意带前缀：
document.addEventListener('fullscreenchange', handleFullscreenChange);
document.addEventListener('webkitfullscreenchange', handleFullscreenChange);
document.addEventListener('mozfullscreenchange', handleFullscreenChange);
document.addEventListener('msfullscreenchange', handleFullscreenChange);
function handleFullscreenChange() {
if (document.fullscreenElement) {
console.log('已进入全屏');
} else {
console.log('已退出全屏');
}
}
判断当前是否全屏，可检查document.fullscreenElement是否存在。
注意事项与限制
全屏操作通常需要用户手势触发（如点击），直接在页面加载时调用会被浏览器阻止。
某些移动浏览器对全屏API支持有限，特别是Safari on iOS，可能无法真正隐藏地址栏或系统UI。
确保目标元素允许全屏，部分iframe嵌入内容需设置allow="fullscreen"属性。
基本上就这些。只要封装好请求、退出和事件监听的兼容层，就能在主流浏览器中稳定使用全屏功能。
