Question

在我们的应用程序中，我们必须从后端服务中获取用户上下文。如果用户上下文更改，则需要重新加载应用程序。由于用户可以在其他选项卡中更改其上下文。我们每5秒钟对后端服务执行一次ping操作，以检查用户上下文是否已更改。

是否可以检测用户是否已停用或激活了当前标签页？这样可以节省每5秒对后端执行ping操作的时间。

用户可以在同一应用程序或另一个应用程序的不同选项卡中更改上下文。

Answer 1

使用here中的hasFocus（）方法，该方法存储标签焦点的上下文。

Document接口的hasFocus（）方法返回一个布尔值，该值指示文档或文档中的任何元素是否具有焦点。此方法可用于确定文档中的活动元素是否具有焦点。

如果您希望使用带有事件监听器的异步版本，请使用Page Visibility API。

Answer 2

案例1

只需将此EventListener添加到您的构造函数中即可。

document.addEventListener("visibilitychange", function() {
      if (document.hidden) {
        //do whatever you want
        console.log("Hidden");
      }
      else {
        //do whatever you want
        console.log("SHOWN");
      }
});

案例2

请参阅此处如果您更改选项卡$(window).blur(function ()，则函数将调用；如果再次进入此选项卡，则将$(window).focus(function ()，函数将调用。 将此代码添加到您的构造函数中

$(window).focus(function () {
      //do something
       console.log("You are in this tab");
});

$(window).blur(function () {
      //do something
       console.log("You left this tab");
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p>Click here and click outside of this..</p>

Angular 7检测浏览器选项卡变为活动状态

2 个答案: