h5 Visibility API總結

看風景就發表於2018-01-16
H5API

最近活動中的小遊戲，有涉及頁面隱藏或app後臺執行時候，暫停遊戲的功能，使用了h5的Visibility API，在此總結如下：

兩個屬性

document.hidden (Read only)

如果頁面處於被認為是對使用者隱藏狀態時返回true，否則返回false。

document.visibilityState (Read only)

是一個用來展示文件可見性狀態的字串。可能的值：

visible : 頁面內容至少是部分可見。 在實際中，這意味著頁面是非最小化視窗的前景選項卡。
hidden : 頁面內容對使用者不可見。 在實際中，這意味著文件可以是一個後臺標籤，或是最小化視窗的一部分，或是在作業系統鎖屏啟用的狀態下。
prerender : 頁面內容正在被預渲染且對使用者是不可見的(被document.hidden當做隱藏). 文件可能初始狀態為prerender，但絕不會從其它值轉為該值。 註釋：瀏覽器支援是可選的。
unloaded : 頁面正在從記憶體中解除安裝。 註釋：瀏覽器支援是可選的。

一個事件

document.addEventListener("visibilitychange", handleVisibilityChange, false);

function handleVisibilityChange() {
  if (document.hidden) {
    pauseSimulation();
  } else  {
    startSimulation();
  }
}

在主流瀏覽器和mobile瀏覽器上都有不錯的相容性

示例程式碼：

//獲取帶字首的事件
// Get Browser-Specifc Prefix
function getBrowserPrefix() {
  if ('hidden' in document) {
    return null;
  }
  var browserPrefixes = ['moz', 'ms', 'o', 'webkit'];
  for (var i = 0; i < browserPrefixes.length; i++) {
    var prefix = browserPrefixes[i] + 'Hidden';
    if (prefix in document) {
      return browserPrefixes[i];
    }
  }

  return null;
}
 
function hiddenProperty(prefix) {
  if (prefix) {
    return prefix + 'Hidden';
  } else {
    return 'hidden';
  }
}
 
function visibilityState(prefix) {
  if (prefix) {
    return prefix + 'VisibilityState';
  } else {
    return 'visibilityState';
  }
}
 
function visibilityEvent(prefix) {
  if (prefix) {
    return prefix + 'visibilitychange';
  } else {
    return 'visibilitychange';
  }
}

var prefix = getBrowserPrefix();
    var hidden = hiddenProperty(prefix);
    var visibilityState = visibilityState(prefix);
    var visibilityEvent = visibilityEvent(prefix);
     
var timer = null;
    
function increaseVal() {
    var newVal = parseInt($('#valueContainer').text()) + parseInt(1);
    $('#valueContainer').text(newVal);
    document.title = newVal + ': Running'; 
        
    timer = setTimeout(function() {
        increaseVal();
    }, 1);
}
    
// Visibility Change 
document.addEventListener(visibilityEvent, function(event) {
        if (document[hidden]) {
            clearTimeout(timer);
            var val = parseInt($('#valueContainer').text());
            document.title = val + ': Pause'; 
        } else {
            increaseVal();  
        }
});

increaseVal();

 

參考：https://code.tutsplus.com/articles/html5-page-visibility-api--cms-22021
　　    https://developer.mozilla.org/zh-CN/docs/Web/API/Page_Visibility_API

相關文章