有没有办法用 Javascript 跟踪选项卡上的焦点？

Question

• 我们需要跟踪用户在网站上的有效时间
• 大多数用户在完成后都会将选项卡保持打开状态并移至另一个选项卡
• 网站上的时间非常不准确

是否有 Javascript 事件来跟踪用户的“失去焦点”当前选项卡？

Answer 1

我会使用 mousemove 和 scroll 执行某些操作，只要在某个时间间隔内触发其中任何一个，就将访问者视为活动访问者。这也将涵盖他们保持浏览器打开和离开计算机的情况。

Answer 2

你说的是哪个标签？它是您的导航/菜单选项卡还是浏览器选项卡。我觉得，你指的是浏览器选项卡！
我认为准确地说是不可能的。但是，如果您跟踪一些事件（例如鼠标移动、焦点等），然后触发与服务器上的某些数据（计数器）相同的事件，该怎么办？当用户在您的页面上时，他会执行诸如移动鼠标、单击某处等操作。因此，首页加载和最后一个事件的差异可以告诉使用情况统计信息。

Answer 3

虽然这个问题很早就提出了，但仍然可能会被人发现。在这种情况下，请使用页面可见性 API：

https://developer.mozilla .org/en-US/docs/Web/API/Page_Visibility_API

document.visibilityState - 获取当前选项卡状态。
document.onvisibilitychange - 添加状态更改的回调。

Answer 4

  <script>
    document.onvisibilitychange = () => {
      if (document.visibilityState === "hidden") {
        console.log("tab inactive");
      }
      if (document.visibilityState === "visible") {
        console.log("tab active");
      }
    };
  </script>

Answer 5

这应该适用于选项卡切换和浏览器窗口失去焦点：

function onBlur() {
    document.body.className = 'blurred';
};
function onFocus(){
    document.body.className = 'focused';
};

if (/*@cc_on!@*/false) { // check for Internet Explorer
    document.onfocusin = onFocus;
    document.onfocusout = onBlur;
} else {
    window.onfocus = onFocus;
    window.onblur = onBlur;
}