如何判断用户是否真正在查看网页？

Question

是否可以确定用户是否在当前网页上处于活动状态，或者是否专注于不同的选项卡或窗口？

似乎如果您切换选项卡，任何设置超时/间隔的 JavaScript 都会继续运行。当用户不在页面上时能够“暂停”事件会很好。

向主体附加鼠标悬停事件之类的东西会起作用吗？还是会太占用资源？

Answer 1

您可以在 onfocus

 上放置 

onblur

/

window 事件。

窗口上有对这些事件的广泛支持。

示例：

window.onfocus = function() {
    document.body.innerHTML += "<br>I've gained focus.";
};

window.onblur = function() {
    document.body.innerHTML += "<br>I've lost focus.";
};

span {color:blue}

<span>CLICK IN AND OUT OF THIS FRAME.
    <br><br>(It has its own "window" object).</span>
<br><br>

Answer 2

Open Web Analytics（也许还有其他一些跟踪工具）具有操作跟踪

Answer 3

您还可以使用文档的

visibilityState：

document.addEventListener("visibilitychange", function() {
  if( document.visibilityState === 'visible' ) {
    // Do your thing
  }
});

此 API 被

广泛接受。

Answer 4

您可以使用

mousemove

 事件保持活动变量的运行（假设用户没有将鼠标留在页面上）。当此变量（可能是时间戳）在 x 秒内尚未更新时，您可以说该页面未处于活动状态并暂停任何脚本。

只要您不在主体事件处理程序中进行大量处理，就应该没问题。它应该只更新变量，然后让脚本以一定的时间间隔轮询它以进行处理/检查（比如每 1000 毫秒）。

Answer 5

将侦听器附加到 mousemove、keyup 和滚动到文档。

我使用这个

throttle/debounce 函数（无需 jQuery 即可工作，即使它是一个 jQuery 插件，如果 jQuery 存在的话）只在大约 250 毫秒内运行一次代码来响应它们，这样你就不会触发一些代码鼠标移动的每个像素。