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