JS实现返回上一页并刷新页面的方法分析

JS返回上一页并刷新页面的实现方法

本文介绍了一种通过JavaScript实现返回上一页并刷新页面的具体方法，供读者参考学习。

常见返回不刷新的两种情况

通常情况下，使用 history.back() 或 history.go(-1) 返回上一级页面时，页面不会自动刷新。这种不刷新的现象主要包含两种情况：

1. 在 Android 或 PC 浏览器中，页面看似刷新了，但实际上所有资源都是从缓存中加载的。通过浏览器调试工具可以观察到 from disk cache 或 from memory cache 的提示。
2. 在 iOS 系统中，返回上一页后，甚至不会执行上一页的脚本文件（实际上是因为执行了 onpageshow 事件）。

iOS中onpageshow事件与persisted属性

搜索 iOS 返回上一页并刷新页面的解决方案时，通常会看到监听 onpageshow 事件的方法。根据文档说明，可以通过 PageTransitionEvent 对象的 persisted 属性来判断页面是从服务器直接载入还是从缓存中读取；如果页面从浏览器缓存中读取，该属性返回 true，否则返回 false。

iOS页面刷新代码示例

若要在 iOS 中实现返回上一页并刷新，可以在上一页的脚本文件中添加如下代码：

window.addEventListener('pageshow', function(event) {
 if(event.persisted) { // ios 有效, android 和 pc 每次都是 false
  sessionStorage.removeItem('refresh');
  location.reload();
 }
});

Android和PC浏览器的兼容性问题

然而，这种方式在 Android 和 PC 浏览器中无效。经过尝试发现，在 Android 和 PC 浏览器中，每次进入 pageshow 事件后，event.persisted 永远返回 false。

基于缓存的通用刷新方案

无论何种情况，都会监听到 pageshow 事件。既然能进入该函数，就需要想办法判断是否需要刷新页面。可以通过缓存方式 localStorage 或 sessionStorage 或 cookie 来实现。

要在页面中判断是否需要刷新，需要在从下一级返回时，往缓存中存入需要刷新的标记。

sessionStorage.setItem('refresh', 'true');
history.go(-1);

然后在上一级页面获取并判断该标记。

if(sessionStorage.getItem('refresh') === 'true') {
 sessionStorage.removeItem('refresh');
 location.reload();
}

全设备兼容的最终实现代码

综合兼容所有设备的返回上一页并刷新页面的方式如下：

window.addEventListener('pageshow', function(event) {
 if(event.persisted) { // ios 有效, android 和 pc 每次都是 false
  location.reload();
 } else { // ios 除外
  if(sessionStorage.getItem('refresh') === 'true') {
   location.reload();
  }
 }
 sessionStorage.removeItem('refresh');
});

注意：

1. 在下一级页面返回时，要标记需要刷新页面(set)

2. 在判断完成后，一定要删除之前的存储(remove)，避免出现无限重载的情况

更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《JavaScript页面元素操作技巧总结》、《JavaScript操作DOM技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript错误与调试技巧总结》及《JavaScript数学运算用法总结》

希望本文所述对大家JavaScript程序设计有所帮助。