👀 检测您的网站何时对用户可见

funtabify v1.0

您可以使用 onvisibilitychange 和 visibilityState 检测用户是否正在查看您的页面或当前在另一个选项卡上

这是一个非常实用的功能，可以帮助确保用户在切换到其他标签页时不会错过重要内容。例如，您可以使用它来暂停当前正在播放的视频，只有当用户点击返回您的网站时才会重新播放。

下面这个非常简单的例子会根据页面当前是否可见来更改文档标题，但可以轻松修改以更改网站的其他部分。

<html>
  <body>
    <h1>Welcome</h1>
    <script>
       document.onvisibilitychange = function () {
          document.visibilityState === "visible"
             ? (document.title = "👋 Hello")
             : (document.title = "😟 Bye!");
       };
     </script>
  </body>
</html>

如果您喜欢这个小片段，您可以在 Twitter 上关注我，我会定期发布与 HTML、CSS 和 JavaScript 相关的简短技巧。

文章来源：https://dev.to/iainfreestone/detect-when-your-site-is-visible-to-users-3o8d