项目完整示例代码
访问页面后默认自动开启常亮
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> 前端保持屏幕常亮示例 by hexingxing.cn</title>
</head>
<body>
<h1> 屏幕常亮示例</h1>
<p> 打开此页面后，屏幕会自动保持常亮。</p>
<script>
let wakeLock = null;
// 检查浏览器是否支持 wakeLock
if ('wakeLock' in navigator) {
// 请求保持屏幕常亮
async function requestWakeLock() {
try {
wakeLock = await navigator.wakeLock.request('screen');
console.log(" 屏幕已保持常亮");
// 监听 wakeLock 的释放事件
wakeLock.addEventListener('release', () => {
console.log(" 屏幕常亮已释放");
});
} catch (err) {
console.error(`请求屏幕常亮失败: ${err.name}, ${err.message}`);
}
}
// 页面加载时请求屏幕常亮
requestWakeLock();
// 页面失去焦点时重新请求屏幕常亮
document.addEventListener('visibilitychange', () => {
if (wakeLock !== null && document.visibilityState === 'visible') {
requestWakeLock();
}
});
} else {
console.log(" 当前浏览器不支持屏幕常亮功能");
}
</script>
</body>
</html>
访问页面后手动点击按钮开启
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> 屏幕常亮支持测试 by hexingxing.cn</title>
</head>
<body>
<h1> 屏幕常亮示例</h1>
<p> 此页面会尝试保持屏幕常亮。</p>
<button id="toggleButton"> 开启屏幕常亮</button>
<script>
let wakeLock = null;
const toggleButton = document.getElementById('toggleButton');
// 检查浏览器是否支持 wakeLock
if ('wakeLock' in navigator) {
async function requestWakeLock() {
try {
wakeLock = await navigator.wakeLock.request('screen');
console.log(" 屏幕已保持常亮");
toggleButton.textContent = " 关闭屏幕常亮";
wakeLock.addEventListener('release', () => {
console.log(" 屏幕常亮已释放");
toggleButton.textContent = " 开启屏幕常亮";
});
} catch (err) {
console.error(`请求屏幕常亮失败: ${err.name}, ${err.message}`);
}
}
async function releaseWakeLock() {
if (wakeLock !== null) {
await wakeLock.release();
wakeLock = null;
console.log(" 屏幕常亮已手动释放");
}
}
toggleButton.addEventListener('click', () => {
if (wakeLock === null) {
requestWakeLock();
} else {
releaseWakeLock();
}
});
// 页面失去焦点时重新请求屏幕常亮
document.addEventListener('visibilitychange', () => {
if (wakeLock !== null && document.visibilityState === 'visible') {
requestWakeLock();
}
});
} else {
console.log(" 当前浏览器不支持屏幕常亮功能");
toggleButton.disabled = true;
toggleButton.textContent = " 屏幕常亮不支持";
}
</script>
</body>
</html>
检测是否支持常亮
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> 屏幕常亮支持测试 by hexingxing.cn</title>
</head>
<body>
<h1> 屏幕常亮支持测试 by hexingxing.cn</h1>
<p id="supportMessage"></p>
<script>
const supportMessage = document.getElementById('supportMessage');
if ('wakeLock' in navigator) {
supportMessage.textContent = " 当前浏览器支持 wakeLock API。屏幕常亮已启用。";
// 在此处可以调用保持屏幕常亮的函数
} else {
supportMessage.textContent = " 当前浏览器不支持 wakeLock API。";
}
</script>
</body>
</html>
项目功能成品方案
https://get.hexingxing.cn/time
https://hexingxing.cn/keep-screen-on
友情提示：本站所有文章，如无特殊说明或标注，均为何星星原创发布。与此同时，趋于近年来本站的文章内容频繁被他站盗用与机器采集，现已全局禁用网站文字内容操作，了解详情或转载文章请 点此 继续！
0 条评论