最近工作中遇到了个问题,就是a页面有排列表,每个列表中有个按钮,如果点击按钮就会跳转到b页面,b页面能够操作列表内容,比如删除。问题来了,再b页面删除列表的一个内容之后,点浏览器的返回或者移动端的返回,a页面的列表并没有变化,只有强行刷新才能有用。
遇事不决怎么办?百度啊,首先想到的是popstate,什么是popstate?
当活动历史记录条目更改时,将触发popstate事件。
我这聪明的小脑袋啊!思路就是当b页面返回到a时,监听popstate,然后执行刷新,
上代码:
function pushHistory(){
console.log('popstate');
window.addEventListener("popstate", function(e) {
//self.location.reload();
console.log('layman')
}, false);
var state = {title : "",url : "#"};
window.history.replaceState(state, "", "#");
}
好吧,在网上寻了怎么一段代码,兴冲冲的ctrl+s,但是,没反应?找原因,发现console的popstate没有打印,我的pushHistory触发是放在body的onload中的,结果在b返回a的时候并没有执行onload,没有执行!!!!,好吧,先换个地测放在ready中,终于好了,但是还是没反应,监听的popstate并没有执行,里面打印的layman也没有打印出来,我已经开始怀疑人生了,测了好久,就是死活不行,好吧,不能一条路上堵死,咱们再找方法
然后,我又找到了这个 – Back/Forward cache(往返缓存)
是浏览器为了在用户页面间执行前进后退操作时拥有更加流畅体验的一种策略。该策略具体表现为,当用户前往新页面时,将当前页面的浏览器DOM状态保存到bfcache中;当用户点击后退按钮的时候,将页面直接从bfcache中加载,节省了网络请求的时间。
和我的问题类似哎,那得参考参考,我又寻了段代码:
window.addEventListener('pageshow', function( e ){
if(e.persisted){
//self.location.reload();
}
console.log(e.persisted)
})
这么简单,怎么可能解决我的问题,然而,啪啪打脸,困扰我那么那么旧的问题(其实不到一天啦),竟然这点就够了?
认清现实,知识存储少不能怪别人,给大家介绍一下window.name
name 属性可设置或返回存放窗口的名称的一个字符串
没错,就是那么短,比你以为的还要短。所以原理就是:
哈哈!那么简单你们肯定懂。
但是会有一个问题,就是刷新页面时,会执行两次,程序员好难啊!
暂时还找不到很好的办法,找到了会更新的。有大神知道了也可以告诉我下。好了,本文到此结束(不要叫我巨能水啊)。