如何保持屏幕常亮_Js实现设备保持唤醒状态

更新日期: 2024-03-07阅读: 827标签: 屏幕

JavaScript 中的一些新功能非常值得期待,唤醒锁定 api 就是其中之一。它允许我们与主机系统进行交互,可以帮助开发人员使用 JavaScript 指示操作系统保持屏幕唤醒状态!

这对于希望用户的设备不会因非活动超时而被锁定的情况尤其有用。浏览器可以指示操作系统用户正在进行某项活动,例如录制或观看视频。


防止屏幕休眠或变暗

然后就可以使用唤醒锁定 API 来防止屏幕休眠或变暗。用于请求权限:

let screenLock;

try {
screenLock = await navigator.wakeLock.request('screen');
} catch (err) {
console.log('Error with wake lock: ', err);
}

如果请求成功,主机将不会休眠,直到唤醒锁以编程方式被释放。这就是使用 JavaScript 保持屏幕唤醒所需的全部功能。

我们将代码封装在 try-catch 中,因为如果主机设备处于省电模式、电池电量不足或当前标签不可见,屏幕唤醒锁请求可能会被拒绝。


释放唤醒锁

await screenLock.release()

值得注意的是,如果文档处于非活动状态(用户更换标签页/窗口等),锁定会自动解除。为了处理这个问题,我们可以添加一个可见性变化事件:

document.addEventListener('visibilitychange', async () => {
try {
screenLock = await navigator.wakeLock.request('screen');
} catch (err) {
console.log('Error with wake lock: ', err);
}
});


请注意

该 API 仅在应用程序通过 HTTPS 提供时可用。

虽然该 API 已经存在了一段时间,但并非所有浏览器都支持它。您可以查看 MDN 兼容性,了解哪些浏览器支持。在撰写本文时,iOS 上的 firefox 和 Safari 尚不支持。

在设备上使用此功能可确保设备不会进入休眠状态。


链接: https://fly63.com/article/detial/12680

JS,Jquery获取各种屏幕的宽度和高度

这篇文章介绍了JS和jquery获取各种屏幕的宽度和高度的代码,有需要的朋友可以参考一下:网页可见区域宽: document.body.clientWidth,网页可见区域高: document.body.clientHeight

Js如何判断元素是否在屏幕可视范围内

假设目标元素:#element,该元素相对于文档顶部的偏移距离,获取该元素的高度.那应该如何确定元素在可见区域内呢?假设当元素的上边框刚好出现在浏览器的底部时(零界点)

js监听屏幕方向如何第一次默认不监听

家有时候有需求在屏幕方向改变的时候重新执行某个渲染函数,以获取方向改变后的实际宽高,但是首次加载的执行函数要在其他地方执行,这时候可以加一个flag的状态值,默认为false

Vue移动端右滑屏幕返回上一页

有些时候我们玩手机更喜欢使用手势滑动带来的用户操作体验。Vue touch directive是一个用于移动设备操作指令的轻量级的VUE组件。使用它可以轻松实现屏幕触控、滑动触发事件,提高用户体验

横竖屏检测 orientation resize matchMedia

这在家办公也不让闲着点。虽然说需求提出来了,但是我们身为一个前端er,还是要有自己的想法呀,我们要统计一波数据看看到底有多少人在横屏使用我们的产品。

20行JS代码实现屏幕录制

在开发中可能有遇到过屏幕录制的需求,无论是教学、演示还是游戏录制,都需要通过屏幕录制来记录和分享内容。一般在App内H5页基于客户端能力实现的较多,现在浏览器中的 MediaRecorder 也提供了这种能力

判断元素是否在可视范围内

getBoundingClientRect会受到transform的影响。比如你的元素设置了transform:scale(2), 那么getBoundingClientRect返回的width会是元素实际宽度的2倍,top等位置信息也会因为元素尺寸变化而发生变化.

当我遇见了强制横屏签字的需求...

在前一阶段的工作中,突然接到了这个需求:手写签批的页面在移动端竖屏时强制页面横屏展示进行签字,一开始我觉着只要将页面使用 CSS3 的 transform 进行 rotate 一下就可以了

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!