网页编程网

1.背景

移动端在浏览H5网页时，经过一段时候后系统会黑屏，手机进入休眠模式。NoSleep插件旨在让任何Android ，iOS浏览器不进入休眠状态，保持屏幕常亮。

2.原理

nosleep.js插件激活时会在H5网页中生成一段mp4视频，从而保证设备常亮。

3.Demo

https://richtr.github.io/NoSleep.js/example/

直接在移动端加载该页面测试即可。

4.使用

4.1引入NoSleep库

库在这里=> https://github.com/richtr/NoSleep.js/blob/master/dist/NoSleep.min.js

4.2初始化组件

//init noSleep

var noSleep = new NoSleep();

// Enable wake lock.

// (must be wrapped in a user input event handler e.g. a mouse or touch handler)

//  noSleep.enable()初始化方法必须绑定在鼠标事件或触摸事件内，

//  当点击页面时就会激活不休眠功能

document.addEventListener('click', function enableNoSleep() {

document.removeEventListener('click', enableNoSleep, false);

noSleep.enable();

console.log('enable noSleep');

}, false);

5.局限性

某些环境下不能完全兼容，但可以满足正常需求。更多讨论：https://github.com/richtr/NoSleep.js/issues

6.完整示例

苹果设备ios系统暂不支持。