實現網頁全屏，記住這個超實用的 API
作者：林三心不學挖掘機
在現代Web開發(fā)中，??requestFullscreen??是最被低估的API之一。你以為它只是簡單的全屏切換？實則暗藏玄機！本文將揭示那些連MDN都未曾明說的黑科技用法，帶你重新認識這個瀏覽器原生能力。
前言
大家好，我是林三心，用最通俗易懂的話講最難的知識點是我的座右銘，基礎是進階的前提是我的初心~
不為人知的requestFullscreen：解鎖全屏API的隱藏力量
在現代Web開發(fā)中，requestFullscreen是最被低估的API之一。你以為它只是簡單的全屏切換？實則暗藏玄機！本文將揭示那些連MDN都未曾明說的黑科技用法，帶你重新認識這個瀏覽器原生能力。
基礎認知的三大誤區(qū)
// 大多數人這樣使用（但存在致命缺陷）
document.getElementById('video').requestFullscreen();誤區(qū)真相：
- 并非所有元素都可全屏：
<div>元素需設置contain: layout或明確尺寸 - Safari的私有前綴陷阱：需同時處理
webkitRequestFullscreen - 權限限制：必須在用戶交互事件中觸發(fā)，異步調用會失敗
被低估的實戰(zhàn)神技
1. 精準控制全屏元素樣式
/* 鮮為人知的全屏偽元素選擇器 */
video:-webkit-full-screen {
background: #000; /* 覆蓋默認黑邊 */
}
:fullscreen#controls {
opacity: 0.3;
transition: opacity 0.3s;
}
:fullscreen#controls:hover {
opacity: 1; /* 鼠標懸停顯示控制欄 */
}2. 多元素動態(tài)全屏切換
const fullscreenManager = {
currentElement: null,
toggle(element) {
if (this.currentElement === element && document.fullscreenElement) {
document.exitFullscreen();
} else {
this.currentElement = element;
element.requestFullscreen().catch(e => {
console.error('全屏失敗:', e.name);
// 優(yōu)雅降級方案
element.classList.add('simulated-fullscreen');
});
}
}
};
// 畫廊應用：點擊不同圖片切換全屏
document.querySelectorAll('.gallery-img').forEach(img => {
img.addEventListener('click', () => fullscreenManager.toggle(img));
});3. 全屏狀態(tài)下的鍵盤劫持
document.addEventListener('fullscreenchange', () => {
if (document.fullscreenElement) {
// 全屏時重定義鍵盤事件
document.addEventListener('keydown', handleFullscreenHotkeys);
} else {
document.removeEventListener('keydown', handleFullscreenHotkeys);
}
});
function handleFullscreenHotkeys(e) {
if (e.key === 'Escape') return; // 保留默認退出
// 自定義快捷鍵：F切換濾鏡/P畫中畫/S截圖
if (e.key === 'f') toggleFilter();
if (e.ctrlKey && e.key === 'p') enterPictureInPicture();
if (e.shiftKey && e.key === 's') captureScreenshot();
e.preventDefault(); // 阻止頁面滾動
}超越官方文檔的三大黑科技
1. 偽裝全屏檢測（繞過安全限制）
// 檢測是否在偽全屏模式（用戶按F11）
const isFakeFullscreen = () =>
window.outerHeight === screen.height &&
!document.fullscreenElement;
// 應對策略
if (isFakeFullscreen()) {
showAlert('請使用官方全屏按鈕以獲得完整體驗');
}2. 全屏狀態(tài)持久化
// 頁面刷新后恢復全屏狀態(tài)
window.addEventListener('DOMContentLoaded', () => {
const lastFullscreen = localStorage.getItem('fullscreenEl');
if (lastFullscreen) {
document.querySelector(lastFullscreen)?.requestFullscreen();
}
});
document.addEventListener('fullscreenchange', () => {
localStorage.setItem('fullscreenEl',
document.fullscreenElement?.id || ''
);
});3. 全屏中的全屏（嵌套沙盒）
<div id="main-screen">
<iframe id="sub-screen" allowfullscreen></iframe>
</div>
<script>
// 主容器全屏后，自動激活iframe內全屏
mainScreen.addEventListener('fullscreenchange', async () => {
if (document.fullscreenElement === mainScreen) {
const iframeDoc = subScreen.contentDocument;
await iframeDoc.getElementById('video').requestFullscreen();
}
});
</script>意想不到的應用場景
全屏表格編輯器
// Excel式體驗
function enterSpreadsheetMode() {
document.querySelector('.active-cell').scrollIntoView({block: 'center'});
setTimeout(() => gridContainer.requestFullscreen(), 300);
}全景圖查看器
// 陀螺儀控制全景
document.addEventListener('fullscreenchange', initGyroControl);全屏WebGL性能優(yōu)化
// 全屏時切換高質量渲染
canvas.requestFullscreen({ navigationUI: 'hide' })
.then(() => setRenderQuality('ultra'));防錄屏水印系統(tǒng)
:fullscreen::before {
content: "";
position: fixed;
z-index: 9999;
background: url('watermark.png') repeat;
opacity: 0.05;
pointer-events: none;
/* 更多防泄密技巧... */
}開發(fā)者必知的陷阱清單
陷阱描述 | 解決方案 |
iOS Safari全屏視頻強制橫屏 | 添加 |
全屏狀態(tài)丟失滾動位置 | 使用 |
全屏觸發(fā)頁面重排 | 提前設置 |
全屏時無法打開DevTools | 開發(fā)環(huán)境禁用全屏快捷鍵攔截 |
全屏元素內iframe權限限制 | 添加 |
終極代碼：全屏API完全解決方案
const Fullscreen = {
// 統(tǒng)一前綴處理
request: async (el = document.documentElement) => {
const methods = [
'requestFullscreen',
'webkitRequestFullscreen',
'mozRequestFullScreen',
'msRequestFullscreen'
];
for (const method of methods) {
if (el[method]) {
try {
await el[method]({ navigationUI: 'hide' });
returntrue;
} catch (e) { console.warn(method, 'failed:', e) }
}
}
returnfalse;
},
// 狀態(tài)檢測
isActive: () => !!(
document.fullscreenElement ||
document.webkitFullscreenElement ||
document.mozFullScreenElement ||
document.msFullscreenElement
),
// 退出全屏
exit: async () => {
const exitMethods = [
'exitFullscreen',
'webkitExitFullscreen',
'mozCancelFullScreen',
'msExitFullscreen'
];
for (const method of exitMethods) {
if (document[method]) {
try {
awaitdocument[method]();
returntrue;
} catch (e) { console.warn(method, 'failed:', e) }
}
}
returnfalse;
},
// 事件監(jiān)聽統(tǒng)一封裝
onChange: (callback) => {
const events = [
'fullscreenchange',
'webkitfullscreenchange',
'mozfullscreenchange',
'MSFullscreenChange'
];
events.forEach(evt =>document.addEventListener(evt, callback));
}
};兼容性
圖片
責任編輯：武曉燕
來源：
前端之神
