Question

在Google Chrome中使用网页可见性API时，会触发两次事件。这只是在Chrome中发生的一些事情。

document.addEventListener('visibilitychange', function(e) {
    if (!document.hidden) {
        console.log(e);
    }
});

根据我对API的了解，该事件被假定为触发一次。无论浏览器如何，我都试图点击它。

Answer 1

您必须使用两种不同的方法来检测browser window和browser tab。

对于跨浏览器解决方案，请查看此示例：

<强> Using HTML5 Visibility API to manage the focus of browser tabs and windows ：

要检测browser tab是否有效，请使用HTML5 Visibility API：

/////////////////////////////////////////
// main visibility API function 
// check if current tab is active or not
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];
  }
})();

/////////////////////////////////////////
// check if current tab is active or not
vis(function(){

  if(vis()){    

       // the setTimeout() is used due to a delay 
       // before the tab gains focus again, very important!
       setTimeout(function(){ 

          // browser tab gains focus
          // code goes here

       },300);      

   } else {

       // browser tab gains focus
       // code goes here    
   }
});

要检测browser window，您只需检查窗口blur，focus，focusin和focusout，具体取决于浏览器：

/////////////////////////////////////////
// check if browser window has focus        
var notIE = (document.documentMode === undefined),
    isChromium = window.chrome;

if (notIE && !isChromium) {

    // checks for Firefox and other  NON IE Chrome versions
    $(window).on("focusin", function () { 

        setTimeout(function(){      

            // browser window gains focus
            // code goes here

        },300);

    }).on("focusout", function () {

        // browser window loses focus
        // code goes here

    });

} else {

    // checks for IE and Chromium versions
    if (window.addEventListener) {

        // bind focus event
        window.addEventListener("focus", function (event) {

            // the timeout is due to a slight delay when a browser tab regains focus
            setTimeout(function(){                 

                 // browser window gains focus
                 // code goes here

            },300);

        }, false);

        // bind blur event
        window.addEventListener("blur", function (event) {

            // browser window loses focus
            // code goes

        }, false);

    } else {

        // bind focus event
        window.attachEvent("focus", function (event) {

            // the timeout is due to a slight delay when a browser tab regains focus
            setTimeout(function(){                 

                 // browser window gains focus
                 // code goes here

            },300);

        });

        // bind focus event
        window.attachEvent("blur", function (event) {

            // browser window loses focus
            // code goes here

        });
    }
}

<强>资源：

MDN - visibilitychange
MDN - Using_the_Page_Visibility_API
上述代码的工作示例：http://codepen.io/jonathan/pen/sxgJl

如果需要，我还将其转换为jQuery插件。您可以在GreenSock GSAP论坛上下载link here。

或直接下载TabWindowVisibilityManager jQuery Plugin。

我希望你觉得这很有用！

Answer 2

看起来这是Chrome中的错误： https://code.google.com/p/chromium/issues/detail?id=409467

解决方法似乎是附加到窗口：

解决方法：使用窗口将事件附加到。这似乎非标准。

Google Chrome中的网页可见性API

2 个答案: