Page Visibility API页面可见性事件监听的兼容性写法

今天药忘吃喽~ 2022-04-22 00:54 284阅读 0赞

考虑到这个API在各个版本各个类型的浏览器表现有所不同，所以小邹下面给大伙出一个兼容性的写法：

// 设置隐藏属性和改变可见属性的事件的名称
    var hidden, visibilityChange; 
    if (typeof document.hidden !== "undefined") { // Opera 12.10 and Firefox 18 and later support 
      hidden = "hidden";
      visibilityChange = "visibilitychange";
    } else if (typeof document.msHidden !== "undefined") {
      hidden = "msHidden";
      visibilityChange = "msvisibilitychange";
    } else if (typeof document.webkitHidden !== "undefined") {
      hidden = "webkitHidden";
      visibilityChange = "webkitvisibilitychange";
    }
     
    var videoElement = document.getElementById("videoElement");
    
    // 如果页面是隐藏状态，则暂停视频
    // 如果页面是展示状态，则播放视频
    function handleVisibilityChange() {
      if (document[hidden]) {
        videoElement.pause();
      } else {
        videoElement.play();
      }
    }
    
    // 如果浏览器不支持addEventListener 或 Page Visibility API 给出警告
    if (typeof document.addEventListener === "undefined" || typeof document[hidden] === "undefined") {
      console.log("This demo requires a browser, such as Google Chrome or Firefox, that supports the Page Visibility API.");
    } else {
      // 处理页面可见属性的改变
      document.addEventListener(visibilityChange, handleVisibilityChange, false);
        
      // 当视频暂停，设置title
      // This shows the paused
      videoElement.addEventListener("pause", function(){
        document.title = 'Paused';
      }, false);
        
      // 当视频播放，设置title
      videoElement.addEventListener("play", function(){
        document.title = 'Playing'; 
      }, false);
    
    }