jquery 全屏
使用 jQuery 实现全屏功能
通过 jQuery 可以结合浏览器的全屏 API 实现元素或页面的全屏展示。以下是具体实现方法：
1. 检测浏览器全屏 API 支持 不同浏览器对全屏 API 的实现存在差异，需检测兼容性：
function isFullscreenSupported() {
return document.fullscreenEnabled ||
document.webkitFullscreenEnabled ||
document.mozFullScreenEnabled ||
document.msFullscreenEnabled;
}2. 进入全屏模式
针对目标元素（如 #element）触发全屏：
function requestFullscreen(element) {
if (element.requestFullscreen) {
element.requestFullscreen();
} else if (element.webkitRequestFullscreen) {
element.webkitRequestFullscreen();
} else if (element.mozRequestFullScreen) {
element.mozRequestFullScreen();
} else if (element.msRequestFullscreen) {
element.msRequestFullscreen();
}
}
// jQuery 调用示例
$('#fullscreen-button').click(function() {
requestFullscreen(document.documentElement); // 整个页面
// 或 requestFullscreen($('#element')[0]); // 特定元素
});3. 退出全屏模式
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();
}
}
// jQuery 调用示例
$('#exit-button').click(function() {
exitFullscreen();
});4. 监听全屏状态变化
$(document).on('fullscreenchange webkitfullscreenchange mozfullscreenchange MSFullscreenChange', function() {
if (document.fullscreenElement ||
document.webkitFullscreenElement ||
document.mozFullScreenElement ||
document.msFullscreenElement) {
console.log('已进入全屏');
} else {
console.log('已退出全屏');
}
});兼容性注意事项
- 现代浏览器（Chrome、Firefox、Edge、Safari）均支持全屏 API，但需注意前缀差异。
- iOS Safari 对全屏功能的支持有限，可能需额外处理。
- 用户交互（如点击事件）是触发全屏的必要条件，不能通过脚本自动调用。
常用插件推荐
若需简化实现，可考虑以下 jQuery 插件：
- jquery-fullscreen-plugin：轻量级封装，支持元素/页面全屏切换。
- screenfull.js：非 jQuery 插件但兼容性好，可与 jQuery 结合使用。
通过上述方法或插件，可灵活控制网页内容的全屏展示与退出。
