巧用document.hidden解决项目需求

@songhlc 2017-09-25 02:17:27发表于 yonyouyc/blog javascript原创

html5提供了一个visibilitychange的页面事件来判断当前页面(页签)状态的可见性,同时还有document.hidden来表明是否可见

如何监控

1.你需要监听visibilitychange事件

document.addEventListener('visibilitychange', function() {

	//dosomething you want while visibilitychange
}, false);

2.你需要判断document.hidden的值

	console.log(document.hidden)// true or false

3.综上

document.addEventListener('visibilitychange', function() {
    if (document.hidden) {
        // 当页签由可见变不可见的时候  
    } else {
        // 当页签由不可见变可见的时候
    }
}, false);

具体业务场景

工作台首页待办事项

需求如下,用户点击首页待办事项中的一条(如开标),会新打开一个页签,在这个页签开标以后,关闭新打开的页签,返回工作台首页,待办事项里对应的开标记录应该消失。

因为开标之后,后台会确认把待办里的开标记录给删除,我们要做的仅仅就是把页面重新加载一遍而已。

所以在visibilitychange里要做的事情就是找到对应的页面组件,然后调用查询事件重新查询一遍即可(考虑到成本问题,我们无法区分用户是否真的做了开标操作,所以只要切换到别的页签再切回来,我们就把数据进行刷新,不同的场景解决不同的问题,以避免页面轮询和socket长连接来解决,代价最低)

浏览器兼容

(ie9不支持,ie10+支持,非核心功能、易用性功能,可以考虑不支持ie9)
不同的浏览器需要不同的前缀,具体代码如下

// 各种浏览器兼容
var hidden, state, visibilityChange; 
if (typeof document.hidden !== "undefined") {
	hidden = "hidden";
	visibilityChange = "visibilitychange";
	state = "visibilityState";
} else if (typeof document.mozHidden !== "undefined") {
	hidden = "mozHidden";
	visibilityChange = "mozvisibilitychange";
	state = "mozVisibilityState";
} else if (typeof document.msHidden !== "undefined") {
	hidden = "msHidden";
	visibilityChange = "msvisibilitychange";
	state = "msVisibilityState";
} else if (typeof document.webkitHidden !== "undefined") {
	hidden = "webkitHidden";
	visibilityChange = "webkitvisibilitychange";
	state = "webkitVisibilityState";
}

// 添加监听器,在title里显示状态变化
document.addEventListener(visibilityChange, function() {
	document.title = document[state];
}, false);

// 初始化
document.title = document[state];