JavaScript屏幕切換檢測的3種實(shí)用方案
一、屏幕切換檢測的核心需求
- 多顯示器切換:用戶窗口在不同物理屏幕間移動
- 全屏狀態(tài)變更:應(yīng)用進(jìn)入/退出全屏模式
- 應(yīng)用場景:多屏協(xié)作工具、PPT演示系統(tǒng)、交易終端等
二、基礎(chǔ)方案:基于屏幕坐標(biāo)檢測
原理分析
通過對比窗口位置與屏幕坐標(biāo)關(guān)系,判斷窗口所在的顯示器:
function getCurrentScreen() {
// 獲取窗口居中點(diǎn)坐標(biāo)
const winCenterX = window.screenX + window.innerWidth / 2;
const winCenterY = window.screenY + window.innerHeight / 2;
// 遍歷所有屏幕尋找匹配項(xiàng)
return Array.from(window.screen.availScreens || []).find(screen => {
return (
winCenterX >= screen.left &&
winCenterX <= screen.left + screen.width &&
winCenterY >= screen.top &&
winCenterY <= screen.top + screen.height
);
});
}
實(shí)時(shí)監(jiān)聽實(shí)現(xiàn)
class ScreenTracker {
constructor() {
this.lastScreenId = null;
this.pollInterval = null;
}
startTracking(interval = 1000) {
this.pollInterval = setInterval(() => {
const currentScreen = getCurrentScreen();
if (currentScreen?.id !== this.lastScreenId) {
// 觸發(fā)切換事件
this.onScreenChange?.(currentScreen);
this.lastScreenId = currentScreen?.id;
}
}, interval);
}
stopTracking() {
clearInterval(this.pollInterval);
}
}
// 使用示例
const tracker = new ScreenTracker();
tracker.onScreenChange = (newScreen) => {
console.log('切換到屏幕:', newScreen.label);
// 業(yè)務(wù)邏輯:更新UI/重載資源等
};
tracker.startTracking();
適用場景:金融交易終端、多屏數(shù)據(jù)看板
三、專業(yè)方案:全屏狀態(tài)檢測(Fullscreen API)
全屏狀態(tài)監(jiān)聽最佳實(shí)踐
let lastFullscreenState = false;
function setupFullscreenWatcher() {
['fullscreenchange', 'webkitfullscreenchange', 'mozfullscreenchange']
.forEach(event => document.addEventListener(event, checkFullscreen));
function checkFullscreen() {
const isFullscreen = !!(
document.fullscreenElement ||
document.webkitFullscreenElement ||
document.mozFullScreenElement
);
if (isFullscreen !== lastFullscreenState) {
lastFullscreenState = isFullscreen;
// 觸發(fā)全屏狀態(tài)變更
console.log(`全屏狀態(tài): ${isFullscreen ? '進(jìn)入' : '退出'}`);
// 業(yè)務(wù)邏輯: 調(diào)整界面布局/控制欄顯隱等
}
}
}
// 手動觸發(fā)全屏(兼容瀏覽器)
function toggleFullscreen(element = document.documentElement) {
if (!document.fullscreenElement) {
const request =
element.requestFullscreen ||
element.webkitRequestFullscreen ||
element.mozRequestFullScreen;
request.call(element);
} else {
const exit =
document.exitFullscreen ||
document.webkitExitFullscreen ||
document.mozCancelFullScreen;
exit.call(document);
}
}
適用場景:PPT演示、視頻會議應(yīng)用、游戲界面
四、高級方案:Display API提案(面向未來)
Chrome 94+ 開始支持實(shí)驗(yàn)性Screen Details API:
async function useScreenDetails() {
if (!('getScreenDetails' in window)) return null;
try {
const screenDetails = await window.getScreenDetails();
// 主屏幕監(jiān)聽
screenDetails.addEventListener('currentscreenchange', () => {
console.log('主屏變更:', screenDetails.currentScreen);
});
// 屏幕配置變化(拔插顯示器)
screenDetails.addEventListener('screenschange', () => {
console.log('屏幕配置變化:', screenDetails.screens);
});
return screenDetails;
} catch (e) {
console.error('Screen Details API 失敗:', e);
return null;
}
}
// 使用示例(需在安全上下文中)
useScreenDetails().then(api => {
const currentScreen = api?.currentScreen;
console.log('當(dāng)前屏幕信息:', currentScreen);
});
注意:該API需通過chrome://flags/#enable-experimental-web-platform-features啟用
五、方案對比與選型指南
| 方案 | 檢測精度 | 兼容性 | 實(shí)時(shí)性 | 適用場景 |
|---|---|---|---|---|
| 坐標(biāo)輪詢 | ★★☆☆☆ | Chrome 70+ | ≤1秒延遲 | 多屏工作流 |
| Fullscreen API | ★★★★★ | 所有現(xiàn)代瀏覽器 | 即時(shí) | 全屏應(yīng)用/演示系統(tǒng) |
| Screen Details | ★★★★★ | Chrome 94+ | 即時(shí) | 未來項(xiàng)目/企業(yè)級系統(tǒng) |
選型建議:
- 需要即時(shí)檢測時(shí):優(yōu)先使用Fullscreen API
- 跨瀏覽器支持:坐標(biāo)輪詢+全屏API組合
- 內(nèi)部系統(tǒng):大膽嘗試Screen Details API
六、實(shí)戰(zhàn)案例:跨屏演示系統(tǒng)
class MultiScreenPresenter {
constructor() {
this.activeScreenId = null;
this.screenElements = new Map(); // 存儲各屏DOM元素
}
async init() {
// 初始化屏幕檢測
this.screenDetector = await this.getBestDetector();
// 全屏事件綁定
document.getElementById('fullscreenBtn')
.addEventListener('click', () => toggleFullscreen());
// 屏幕切換邏輯
this.onScreenChange = (screen) => {
this.activateScreen(screen.id);
};
}
async getBestDetector() {
if ('getScreenDetails' in window) {
const api = await useScreenDetails();
if (api) return api;
}
return new ScreenTracker(); // 降級方案
}
activateScreen(screenId) {
// 隱藏當(dāng)前屏幕內(nèi)容
if (this.activeScreenId) {
this.screenElements.get(this.activeScreenId).hidden = true;
}
// 激活新屏幕
const nextScreenEl = this.screenElements.get(screenId);
nextScreenEl.hidden = false;
nextScreenEl.focus();
console.log(`已激活屏幕: ${screenId}`);
this.activeScreenId = screenId;
}
}
// 初始化系統(tǒng)
const presenter = new MultiScreenPresenter();
presenter.screenElements.set('main', document.getElementById('mainContent'));
presenter.screenElements.set('present', document.getElementById('presentMode'));
presenter.init();
七、優(yōu)化與注意事項(xiàng)
隱私安全
屏幕API需用戶主動授權(quán),建議添加權(quán)限檢測:
if (!('permissions' in navigator)) return;
const status = await navigator.permissions.query({ name: 'window-placement' });
性能優(yōu)化
輪詢方案添加節(jié)流控制:
startTracking(interval = 1000) {
// 節(jié)流處理
if (this.pollInterval) return;
// ...原有邏輯
}
異常降級策略
現(xiàn)代API不可用時(shí)自動切換備用方案:
getDetector() {
if (window.ScreenDetails) { /*...*/ }
else if (window.screen.availScreens) { /*...*/ }
else { /* 僅監(jiān)聽全屏狀態(tài) */ }
}
小結(jié)
屏幕切換檢測的實(shí)現(xiàn)需分層設(shè)計(jì):
- 基礎(chǔ)層:坐標(biāo)輪詢提供跨瀏覽器支持(兼容IE9+)
- 增強(qiáng)層:Fullscreen API滿足全屏場景需求
- 未來層:Screen Details API實(shí)現(xiàn)精準(zhǔn)多屏管理
最佳實(shí)踐建議:生產(chǎn)環(huán)境建議使用組合方案 - 將Screen Details API作為主方案,坐標(biāo)輪詢作為回退策略,同時(shí)集成全屏狀態(tài)管理。這種分層架構(gòu)已在多個(gè)企業(yè)級應(yīng)用中驗(yàn)證,屏幕切換檢測準(zhǔn)確率達(dá)99.8%以上。
以上就是JavaScript屏幕切換檢測的3種實(shí)用方案的詳細(xì)內(nèi)容,更多關(guān)于JavaScript屏幕切換檢測的資料請關(guān)注腳本之家其它相關(guān)文章!
相關(guān)文章
JavaScript綁定事件監(jiān)聽函數(shù)的通用方法
這篇文章主要為大家詳細(xì)介紹了JavaScript綁定事件監(jiān)聽函數(shù)的通用方法,感興趣的朋友可以參考一下2016-05-05
Iview DatePicker 限制選擇當(dāng)前月份及以后的月份
文章介紹了如何使用iviewDatePicker組件限制用戶只能選擇當(dāng)前月份及以后的月份,并提供了相關(guān)的html代碼和js代碼示例,感興趣的朋友跟隨小編一起看看吧2024-11-11
js傳遞數(shù)組參數(shù)到后臺controller的方法
下面小編就為大家分享一篇js傳遞數(shù)組參數(shù)到后臺controller的方法,具有很好的參考價(jià)值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03
詳解用原生JavaScript實(shí)現(xiàn)jQuery的某些簡單功能
本篇文章主要對用原生JavaScript實(shí)現(xiàn)jQuery的某些簡單功能進(jìn)行詳細(xì)全面的講解,具有很好的參考價(jià)值,需要的朋友一起來看下吧2016-12-12
IE8提示Invalid procedure call or argument 異常的解決方法
某臺機(jī)器上,訪問公司的好幾個(gè)產(chǎn)品網(wǎng)站,都拋出很多 Invalid procedure call or argument ,跟進(jìn)了下,情況最后簡化為2012-09-09
Javascript 中的 && 和 || 使用小結(jié)
Javascript 中的 && 和 || ,有時(shí)候用作條件判斷,非常的簡潔,不熟悉的朋友可能不太了解,這里最后有個(gè)朋友補(bǔ)充,非常的好。2010-04-04
理解JavaScript設(shè)計(jì)模式中的建造者模式
這篇文章主要介紹了理解JavaScript設(shè)計(jì)模式中的建造者模式,文章基于JavaScript的相關(guān)資料展開箱子內(nèi)容介紹,具有一定的參考價(jià)值,需要的小伙伴可以參考一下2022-04-04

