HTML5 Page Visibility API 在切换到其他窗口时不起作用

HTML5 Page Visibility API 在切换到其他窗口时不起作用

By ivanilla at 2016-10-19
0人收藏 • 6266人看过

切换到浏览器其他tab以及最小化浏览器窗口可以触发VisibilityChange事件,但新建浏览器窗口或者切换到其他应用程序(此时整个浏览器窗口都处于非活动状态)却无法触发这个事件,有办法解决吗?


另外有没有比较好的办法在WebApp防止屏幕睡眠(在手机是锁屏)?Standby API似乎太新了,旧一些的浏览器可能不支持。。。


这个项目 https://github.com/richtr/NoSleep.js 倒是可以试试,但issues里面一堆XX设备测试失败的。。。

31 个回复 | 最后更新于 2016-11-03
ivanilla
2016-10-19
#1

@lincanbin 来看看吧

lincanbin
2016-10-19
#2

循环播放一个1*1视频?

ivanilla
2016-10-19
#3

回复#2 @lincanbin :

canvas玩游戏用的

ivanilla
2016-10-19
#4

回复#2 @lincanbin :

如果循环播放视频可以阻止设备屏幕睡眠,那hidden这个视频应该也可以。

lincanbin
2016-10-19
#5

回复#4 @ivanilla :

大概可以,毕竟iOS上也有后台不断播放无声音乐来防止自己的后台被杀掉的方法。

ivanilla
2016-10-19
#6

回复#5 @lincanbin :

浏览器不知行不行,到时试试看

lincanbin
2016-10-19
#7

回复#6 @ivanilla :

video标签应该有这个阻止睡眠的功能。

ivanilla
2016-10-19
#8

回复#7 @lincanbin :

我测试了下,桌面最新版FF和Chrome目前还不支持Standby API,这个是W3C 2014年提出的草案,到现在还没浏览器真正支持?或者我用错方法了?我的判断方法是:

if (typeof navigator.wakeLock !== "undefined")

不知有没有问题,反正这边判断的都是false。

不过可以肯定2014年之前的浏览器版本一定不支持。

lincanbin
2016-10-19
#9

回复#8 @ivanilla :

我测了下还真没支持的,大概还没正式定稿吧。

ivanilla
2016-10-19
#10

回复#9 @lincanbin :

试试这段?

navigator.wakeLock.request("display").then(
function successFunction() {
	// somecode
},
function errorFunction() {
	// somecode
});

可以alert测试,只要控制台没错误信息应该就可以了。

ivanilla
2016-10-19
#11

回复#9 @lincanbin :

另外移动平台你测试了吗?

lincanbin
2016-10-19
#12

回复#10 @ivanilla :

不行

lincanbin
2016-10-19
#13

回复#11 @ivanilla :

移动端你可以用vConsole调试。

ivanilla
2016-10-19
#14

回复#12 @lincanbin :

显示undefined?

ivanilla
2016-10-19
#15

回复#13 @lincanbin :

我试了下,Android浏览器(我测试了最新版FF和Chrome)的锁屏对于PV API是有反应的,不管是手动按电源键锁屏还是屏幕自动睡眠,但iOS7(我懒得升级。。。)的Safari和Chrome则没反应。

不过移动版Chrome在锁屏会触发两次事件。。。

lincanbin
2016-10-20
#16

回复#15 @ivanilla :

Chrome真神秘。

ivanilla
2016-10-20
#17

回复#16 @lincanbin :

移动版Chrome在关闭标签时还会触发一次hidden事件。

ivanilla
2016-10-20
#18

回复#16 @lincanbin :

有没有强制网页横屏显示的比较好的解决方案?

Screen Orientation API太新了:https://www.w3.org/TR/screen-orientation/#examples

manifest.json的形式似乎只适合于类似浏览器扩展那样用的WebApp:

{
    "display":      	"fullscreen",
    "orientation":  	"landscape",
}

但我要在普通HTML5网页中使用。。。

最原始的解决方法是CSS3的@media方式:

@media screen and (orientation:portrait) {
    // CSS applied when the device is in portrait mode
}
@media screen and (orientation:landscape) {
    // CSS applied when the device is in landscape mode}

(当然也有把and换成only的)

我还是打算做成failback的形式。

lincanbin
2016-10-20
#19

回复#18 @ivanilla :

直接整页旋转90°就是个不错的方案了。


登 录


现在注册

QQ  登 录    Weibo  登 录    GitHub  登 录