有没有一种使用JavaScript跟踪选项卡焦点的方法？

Question

有没有一种使用JavaScript跟踪选项卡焦点的方法？

javascriptgoogle-analyticsevent-handlinganalyticsdom-events

12

我们需要追踪用户在网站上的有效停留时间。
大多数用户在结束后会保持标签页打开并转移到另一个标签页。
网站停留时间极其不准确。

是否有一种JavaScript事件可以追踪当前标签页失去焦点？

- Leonardo Dario Perna

嗯，我以为模糊事件会在用户将焦点放到另一个选项卡上时触发？当然，这只有在窗口一开始就具有物理焦点时才会触发。 - scunliffe

有趣的问题。然而，我认为答案是“不行”。你可以在<body>或其他地方添加一个“mouseout”处理程序，并跟踪鼠标何时离开窗口（当鼠标移动以选择另一个选项卡时，它会离开窗口），但你并不真正知道那是否会发生。 - Pointy

@scunliffe，至少在Chrome中，我没有看到<body>的任何“模糊”事件。但我确实看到了“mouseout”。 - Pointy

5个回答

4

我会使用mousemove和scroll来实现，只要这些事件在一定时间间隔内触发，就将访问者视为活动状态。这也包括他们保持浏览器打开和离开计算机的情况。

- einarmagnus

1

你说的是哪个选项卡？是你的导航/菜单选项卡还是浏览器选项卡？我感觉你指的是浏览器选项卡！我认为这不可能很准确地实现。但如果你跟踪一些事件，比如鼠标移动、焦点等，然后触发一个事件，在服务器上保存一些数据（计数器）。当用户在你的页面上时，他会做一些事情，比如移动鼠标、点击某个地方等。因此，第一次页面加载和最后一个事件之间的差异可以告诉我们使用统计信息。

- Satya Prakash

1

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

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

document.visibilityState - 获取当前标签页的状态。
document.onvisibilitychange - 添加状态变化的回调函数。

- Марк Ац

0

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

- BustedSanta

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- lashtal · Accepted Answer

这应该在选项卡切换和浏览器窗口失去焦点时都起作用：

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;
}