你是否曾因为网页自动休眠而中断了重要的任务?那么今天为你介绍一款神奇的工具——NoSleep.js,它可以让你的网页保持活跃状态,永不休眠,彻底解决这个困扰。

项目地址:https://github.com/richtr/NoSleep.js

工作原理:浏览器在播放视频的时候,是不会进入睡眠状态的。因此如果H5应用能实现此功能,就可以阻止手机屏幕进入睡眠状态了,NoSleep.js它的原理就是模拟持续播放一小段MP4视频,所以能实现阻止浏览器进入睡眠状态,从而保持屏幕常亮。

我就以php为例:

1.在前引入文件,可以自己修改路径

代码如下:


<head>

<script src="js/NoSleep.js"></script>

</head>

2.在前面添加代码


<script>
        // Create a new NoSleep object
        var noSleep = new NoSleep();

        // Enable wake lock
        document.addEventListener('click', function enableNoSleep() {
            document.removeEventListener('click', enableNoSleep, false);
            noSleep.enable();
        }, false);

        // Disable wake lock
        // noSleep.disable();
    </script>

3.上面的代码是开启状态,禁用就将enable改为disable即可

结束语录:

这款工具实在好用,也是在做网页播放器的时候无意中发现的,真是帮了大忙。哈哈

如果你不确定网页是否开启了NoSleep.js,可查看审核元素的控制台,刷新一下网页,如果有显示Wake Lock active 就说明激活了。