H5 页面可见性visibilitychange事件

最新推荐文章于 2025-07-01 17:56:59 发布

原创最新推荐文章于 2025-07-01 17:56:59 发布 · 1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#H5 visibilitychange事件

个人心得专栏收录该内容

5 篇文章

订阅专栏

博客介绍了在跳转到子页面修改父页面数据后，使用H5 visibilitychange事件刷新列表数据的两种方法。一是父级定义事件，利用localStorage传递信息；二是在列表form表单定义属性，仅在切换到当前页查询数据。该事件可提升用户体验，避免异常。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在跳转到子页面改了父页面的数据，刷新父级列表用户体验是个问题。最近遇到这个问题，暂时发现两种不错的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也会执行相应脚本而造成异常现象问题。