H5 页面可见性visibilitychange事件

在跳转到子页面改了父页面的数据，刷新父级列表用户体验是个问题。最近遇到这个问题，暂时发现两种不错的visibilitychange事件刷新列表数据方法:

1、
首先父级 定义
$(function(){
document.onvisibilitychange = function(){
if(!document.hidden){
if(localStorage.getItem(“son”) == ‘1’){
parent.searchData();
localStorage.removeItem(“son”);
return;
}
}
};
}
这里面因为sessionStorage不能跨窗口共享，所以使用localStorage好些。

子类定义个localStorage.setItem(“son”,“1”);
再父类刷新后要清楚localStorage里的该事件，避免缓存过多。

2、在列表form表单里定义个 data-type=‘visibilitychange’ 属性
$(function(){
document.onvisibilitychange = function(){
var form = $("#form[data-type=‘visibilitychange’]");
if(!document.hidden && form.length && form.is(":visible")){
parent.searchData();
}
};
}
列表直接绑定当前页，只有切换到当前页才查询列表数据

总结：visibilitychange事件可以增加用户使用体验。第二点可以避免visibilitychange监听造成不在页面时触发change也会执行相应脚本而造成异常现象问题。