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

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

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


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


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

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

@lincanbin 来看看吧

2016-10-19   #2

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

2016-10-19   #3

回复#2 @lincanbin :

canvas玩游戏用的

2016-10-19   #4

回复#2 @lincanbin :

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

2016-10-19   #5

回复#4 @ivanilla :

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

2016-10-19   #6

回复#5 @lincanbin :

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

2016-10-19   #7

回复#6 @ivanilla :

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

2016-10-19   #8

回复#7 @lincanbin :

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

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

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

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

2016-10-19   #9

回复#8 @ivanilla :

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

2016-10-19   #10

回复#9 @lincanbin :

试试这段?

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

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

2016-10-19   #11

回复#9 @lincanbin :

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

2016-10-19   #12

回复#10 @ivanilla :

不行

2016-10-19   #13

回复#11 @ivanilla :

移动端你可以用vConsole调试。

2016-10-19   #14

回复#12 @lincanbin :

显示undefined?

2016-10-19   #15

回复#13 @lincanbin :

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

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

2016-10-20   #16

回复#15 @ivanilla :

Chrome真神秘。

2016-10-20   #17

回复#16 @lincanbin :

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

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的形式。

2016-10-20   #19

回复#18 @ivanilla :

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

登录后方可回帖

登 录
信息栏

Carbon Forum是一个基于话题的高性能轻型PHP论坛

下载地址:Carbon Forum v5.9.0
QQ群:12607708(QQ我不常上)

donate

手机支付宝扫描上方二维码可向本项目捐款

粤公网安备 44030602003677号
粤ICP备17135490号

Loading...