活动选项卡时刷新页面答案

【问题标题】：Refresh page when active tab活动选项卡时刷新页面
【发布时间】：2021-02-15 22:25:14
【问题描述】：

目前在我的页面中，我每分钟都使用它来刷新页面：

<head>
...
<meta http-equiv="refresh" content="60" />
...
</head>

相反，我想在用户按下选项卡时刷新页面。假设用户在 Web 浏览器中打开了多个选项卡。他用了几分钟在另一个标签上冲浪。然后当他按下我网站的选项卡时，我希望页面自动刷新，因此用户不必自己检查页面上的任何更新。我怎样才能做到这一点？

【问题讨论】：

stackoverflow.com/questions/20783015/…
请注意，当它实施时，用户体验可能会出乎意料，因此会产生误导。他曾在您的网站上，回来后它消失了，有一段时间是空的，希望再次加载。
您可以使用 onclick 参数将 javascript 函数放在您的 body 标签上，然后让 js 函数重新加载页面
@sergeykuznetsov 我不想在按下页面上的按钮或链接时刷新，但我希望在用户按下我网站的选项卡时刷新页面（顶部的选项卡网络浏览器）。
使用@Andrea Viviani 的答案。这就是你所需要的。

标签： html meta page-refresh

【解决方案1】：

你应该使用 js 和可见性 API：

在您的 html 页面中包含这个小脚本：

<script>
document.addEventListener("visibilitychange", function() {
   if (document.hidden){
       console.log("Browser tab is hidden")
   } else {
       console.log("Browser tab is visible")
       location.reload();
   }
});
</script>

改编自这里： Event for when user switches browser tabs

【讨论】：