JavaScript visibilitychange API 介紹

visibilitychange 是 HTML5 的API,可以用來判斷網頁目前是否正在被使用者觀看

未來可以使用在遊戲、影片上、離開焦點自動暫停,或是閱讀紀錄等等的應用上

不過目前礙於瀏覽器支援度的問題,並不是所有的瀏覽器都支援(IE10+、Safari 不支援、行動版支援度超差)

所以還是先看看知道就好…

直接看範例吧,雖然有點在惡搞…

惡搞雖惡搞,但是這是最直接可以看到效果的 :D

以下是原始碼

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
var vis = (function(){
var stateKey,
eventKey,
keys = {
hidden: "visibilitychange",
webkitHidden: "webkitvisibilitychange",
mozHidden: "mozvisibilitychange",
msHidden: "msvisibilitychange"
};
for (stateKey in keys) {
if (stateKey in document) {
eventKey = keys[stateKey];
break;
}
}
return function(c) {
if (c) document.addEventListener(eventKey, c);
return !document[stateKey];
};
})();
vis(function(){
if (!vis()) {
alert('come back!!');
}
});

此原始碼參考自:http://stackoverflow.com/questions/19519535/detect-if-browser-tab-is-active-or-user-has-switched-away

stateKey 儲存目前瀏覽器用來判斷是否為 active 狀態的 property,eventKey 則是 JavaScript 事件的名稱

這範例用了 curry、closure 的特性,請原諒我目前還沒介紹過 :/

帶我哪天有空再補上(網路上也有很多名人介紹過了,可以 Google 到很多資訊)

等行動版的瀏覽器都更新了,未來這個 API 一定大有可為…

期待未來的網路世界更加美好 :D

參考資料:

  1. visibility API
  2. stackoverflow
  3. Devdoc.io