判断当前用户是否正在与页面交互

Page Visibility API

不知道用户是不是正在与页面交互，这是困扰广大 Web 开发人员的一个主要问题。如果页面最小化了或者隐藏在了其他标签页后面，那么有些功能是可以停下来的，比如轮询服务器或者某些动画效果。
Page Visibility API（页面可见性 API）就是为了让开发人员知道页面是否对用户可见而推出的。

• document.hidden：表示页面是否隐藏的布尔值。页面隐藏包括页面在后台标签页中或者浏览
  器最小化。
• document.visibilityState：表示下列 4 个可能状态的值。
  • 页面在后台标签页中或浏览器最小化。
  • 页面在前台标签页中。
  • 实际的页面已经隐藏，但用户可以看到页面的预览（就像在 Windows 7 中，用户把鼠标移动到任务栏的图标上，就可以显示浏览器中当前页面的预览）。
  • 页面在屏幕外执行预渲染处理。
• visibilitychange 事件：当文档从可见变为不可见或从不可见变为可见时，触发该事件。

检查浏览器是否支持

function isHiddenSupported(){ 
	return typeof (document.hidden || document.msHidden || document.webkitHidden) != "undefined"; 
}

检测页面是否隐藏

if (document.hidden || document.msHidden || document.webKitHidden){ 
 //页面隐藏了
} else { 
 //页面未隐藏
}

为了在两个浏览器中都能侦听到该事件，可以像下面的例子一样，为每个事件都指定相同的事件处理程序：

// EventUtil 的对象，来处理浏览器间的差异(跨浏览器的事件处理程序)
   var EventUtil = {
      addHandler: function (element, type, handler) {
        if (element.addEventListener) {
          element.addEventListener(type, handler, false);
        } else if (element.attachEvent) {
          element.attachEvent("on" + type, handler);
        } else {
          element["on" + type] = handler;
        }
      },
      removeHandler: function (element, type, handler) {
        if (element.removeEventListener) {
          element.removeEventListener(type, handler, false);
        } else if (element.detachEvent) {
          element.detachEvent("on" + type, handler);
        } else {
          element["on" + type] = null;
        }
      }
    };

function handleVisibilityChange(){ 
 var output = document.getElementById("output"), 
 msg; 
 if (document.hidden || document.msHidden || document.webkitHidden){ 
 msg = "Page is now hidden. " + (new Date()) + "<br>"; 
 } else { 
 msg = "Page is now visible. " + (new Date()) + "<br>"; 
 } 
 output.innerHTML += msg; 
} 
//要为两个事件都指定事件处理程序
EventUtil.addHandler(document, "msvisibilitychange", handleVisibilityChange); 
EventUtil.addHandler(document, "webkitvisibilitychange", handleVisibilityChange);

建议大家先不要完全依赖带前缀的 document.visibilityState，最好只使用 document.hidden 属性。

最后

以上就是爱撒娇盼望为你收集整理的判断当前用户是否正在与页面交互的全部内容，希望文章能够帮你解决判断当前用户是否正在与页面交互所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。