就這樣寫
有個限制是需要https
<!DOCTYPE html>
<html lang="zh-TW">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>螢幕恆亮工具</title>
<style>
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
background-color: #1a1a1a;
color: #ffffff;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
margin: 0;
text-align: center;
}
#status {
margin-top: 20px;
font-size: 1.2rem;
color: #888;
}
button {
padding: 15px 30px;
font-size: 1.5rem;
border: none;
border-radius: 50px;
cursor: pointer;
transition: all 0.3s ease;
font-weight: bold;
}
.btn-off {
background-color: #444;
color: #fff;
}
.btn-on {
background-color: #00d26a;
color: #000;
box-shadow: 0 0 20px rgba(0, 210, 106, 0.6);
}
/* 隱藏的影片元素，作為舊版 iOS 的備案 */
video {
position: absolute;
top: 0;
left: 0;
width: 1px;
height: 1px;
opacity: 0.01;
pointer-events: none;
}
</style>
</head>
<body>
<button id="toggleBtn" class="btn-off">點擊開啟恆亮模式</button>
<p id="status">目前狀態：系統預設休眠</p>
<video id="dummyVideo" playsinline muted loop>
<source src="data:video/mp4;base64,AAAAHGZ0eXBNNEVAAAAATTRQVXZlcjIAAgACAAAAHmoK" type="video/mp4">
</video>
<script>
let wakeLock = null;
const btn = document.getElementById('toggleBtn');
const statusText = document.getElementById('status');
const video = document.getElementById('dummyVideo');
// 檢查瀏覽器是否支援 Wake Lock API
const isWakeLockSupported = 'wakeLock' in navigator;
async function toggleWakeLock() {
if (!wakeLock) {
// --- 嘗試開啟恆亮 ---
try {
// 方法 1: 使用原生 Screen Wake Lock API
if (isWakeLockSupported) {
wakeLock = await navigator.wakeLock.request('screen');
// 監聽釋放事件（例如使用者切換分頁時）
wakeLock.addEventListener('release', () => {
console.log('Wake Lock 已釋放');
updateUI(false);
wakeLock = null;
});
console.log('Wake Lock 啟用成功');
} else {
console.log('不支援 Wake Lock API，使用影片備案');
}
// 方法 2: 影片備案 (針對舊版 iOS 或 API 失效時)
// 關鍵：必須有 playsinline 屬性
video.play().catch(e => console.error("影片播放失敗:", e));
updateUI(true);
} catch (err) {
console.error(`${err.name}, ${err.message}`);
statusText.textContent = `錯誤：${err.message}`;
}
} else {
// --- 關閉恆亮 ---
if (wakeLock) {
await wakeLock.release();
wakeLock = null;
}
video.pause();
updateUI(false);
}
}
function updateUI(isOn) {
if (isOn) {
btn.textContent = "恆亮模式：開啟中";
btn.className = "btn-on";
statusText.textContent = "螢幕將保持開啟，請勿關閉此分頁";
statusText.style.color = "#00d26a";
} else {
btn.textContent = "點擊開啟恆亮模式";
btn.className = "btn-off";
statusText.textContent = "目前狀態：系統預設休眠";
statusText.style.color = "#888";
}
}
// 處理頁面可見性變化
// 當使用者切換到別的 App 再切回來時，Wake Lock 常常會自動斷開，需要重新申請
document.addEventListener('visibilitychange', async () => {
if (wakeLock !== null && document.visibilityState === 'visible') {
try {
wakeLock = await navigator.wakeLock.request('screen');
console.log('頁面恢復顯示，重新獲取 Wake Lock');
} catch(e) {
console.log('重新獲取失敗', e);
}
}
});
btn.addEventListener('click', toggleWakeLock);
</script>
</body>
</html>這是 iphone 6s 能用的
<!DOCTYPE html>
<html lang="zh-TW">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>通用版螢幕恆亮</title>
<style>
/* 基礎樣式：全黑背景省電 */
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
background-color: #000;
color: #fff;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
margin: 0;
overflow: hidden;
transition: background-color 0.5s;
}
h1 { font-size: 1.5rem; margin-bottom: 10px; }
p { color: #888; margin-bottom: 30px; font-size: 0.9rem; }
/* 主按鈕樣式 */
#toggleBtn {
position: relative;
z-index: 10;
padding: 20px 50px;
font-size: 1.2rem;
border: 2px solid #333;
border-radius: 50px;
background-color: transparent;
color: #fff;
cursor: pointer;
transition: all 0.3s ease;
font-weight: bold;
text-transform: uppercase;
letter-spacing: 1px;
/* 防止手機上點擊縮放 */
touch-action: manipulation;
}
/* 啟動狀態的特效 */
body.awake-active {
background-color: #050505;
}
body.awake-active #toggleBtn {
background-color: #00ff88;
color: #000;
border-color: #00ff88;
box-shadow: 0 0 40px rgba(0, 255, 136, 0.4);
animation: pulse 2s infinite;
}
@keyframes pulse {
0% { box-shadow: 0 0 20px rgba(0, 255, 136, 0.4); }
50% { box-shadow: 0 0 50px rgba(0, 255, 136, 0.7); }
100% { box-shadow: 0 0 20px rgba(0, 255, 136, 0.4); }
}
/* 通用版策略：隱藏影片
1. 為了相容 iPhone 6S，不能 display:none 或 opacity:0
2. 我們把它放在按鈕正後方 (z-index: 1)，且很小
*/
#helperVideo {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 10px;
height: 10px;
opacity: 1; /* 必須不透明才能騙過舊 iOS */
z-index: 1; /* 在按鈕後面 */
pointer-events: none;
}
#debug-info {
position: fixed;
bottom: 20px;
font-size: 12px;
color: #444;
font-family: monospace;
}
</style>
</head>
<body>
<h1 id="mainTitle">休眠模式 (預設)</h1>
<p id="subTitle">點擊按鈕以保持螢幕開啟</p>
<button id="toggleBtn">開啟恆亮</button>
<video id="helperVideo" playsinline loop muted>
<source src="data:video/mp4;base64,AAAAHGZ0eXBNNEVAAAAATTRQVXZlcjIAAgACAAAAHmoK" type="video/mp4">
</video>
<div id="debug-info">System Ready</div>
<script>
const btn = document.getElementById('toggleBtn');
const video = document.getElementById('helperVideo');
const body = document.body;
const title = document.getElementById('mainTitle');
const sub = document.getElementById('subTitle');
const debug = document.getElementById('debug-info');
let isKeepingAwake = false;
let wakeLock = null;
let watchdogInterval = null;
// 檢查是否支援原生 API
const hasWakeLock = 'wakeLock' in navigator;
btn.addEventListener('click', () => {
if (!isKeepingAwake) {
activate();
} else {
deactivate();
}
});
async function activate() {
isKeepingAwake = true;
updateUI(true);
// 策略 A: 嘗試原生 Wake Lock (Android / iOS 16.4+)
if (hasWakeLock) {
try {
wakeLock = await navigator.wakeLock.request('screen');
log("原生 WakeLock 已啟用");
// 監聽意外釋放
wakeLock.addEventListener('release', () => {
log("原生 WakeLock 被釋放");
if(isKeepingAwake) log("嘗試重新獲取...");
});
} catch (err) {
log("原生 API 失敗 (可能是 HTTP 環境): " + err.name);
}
}
// 策略 B: 影片循環 (舊 iOS / 備案)
try {
await video.play();
log("背景影片播放中");
} catch (err) {
log("影片播放失敗: " + err.message);
}
// 策略 C: 看門狗 (Watchdog) - 每 1.5 秒檢查一次
if (watchdogInterval) clearInterval(watchdogInterval);
watchdogInterval = setInterval(() => {
// 確保影片在跑
if (video.paused) {
video.play().catch(() => {});
log("Watchdog: 重啟影片");
}
// 確保 WakeLock 還在 (如果在 HTTPS 環境)
if (hasWakeLock && (!wakeLock || wakeLock.released)) {
navigator.wakeLock.request('screen').then(w => wakeLock = w).catch(()=>{});
}
}, 1500);
}
async function deactivate() {
isKeepingAwake = false;
updateUI(false);
// 停止 API
if (wakeLock) {
await wakeLock.release();
wakeLock = null;
}
// 停止影片
video.pause();
// 停止看門狗
if (watchdogInterval) clearInterval(watchdogInterval);
log("已停止所有防休眠措施");
}
function updateUI(active) {
if (active) {
body.classList.add('awake-active');
btn.innerText = "停止恆亮";
title.innerText = "螢幕保持開啟中";
sub.innerText = "請勿關閉此分頁";
} else {
body.classList.remove('awake-active');
btn.innerText = "開啟恆亮";
title.innerText = "休眠模式 (預設)";
sub.innerText = "點擊按鈕以保持螢幕開啟";
}
}
function log(msg) {
console.log(msg);
// 只顯示最後一行 log 在畫面上供除錯
debug.innerText = msg;
}
// 頁面可見性變化處理 (切換 App 後回來)
document.addEventListener('visibilitychange', () => {
if (document.visibilityState === 'visible' && isKeepingAwake) {
log("頁面恢復，重新激活...");
activate(); // 重新跑一次激活流程確保萬無一失
}
});
</script>
</body>
</html>