点击浏览器或者手机返回按钮,刷新历史页面解决方案

前言

我前面文章中写了返回上一页并刷新页面 的方式。这个是我们点击某个按钮,来进行操作的。但是假如我们不是点击某个按钮,而是直接点击手机下面的返回按钮或者浏览器自带返回按钮,如何刷新之前的历史页面呢?

应用场景

假如我们有如下页面列表信息页面

点击进入详情页面,在详情页面修改了数据。

通过历史返回,再返回到列表信息页面,因为列表信息是历史返回的,还是默认显示原来修改前的数据,要刷新一下才是修改后的数据。那么我们通过什么方式可以点击手机返回按钮或者浏览器返回,就能刷新之前历史页面中的数据呢?

相关知识

onpageshow事件和onload事件。 onpageshow 事件类似于 onload 事件,onload 事件在页面第一次加载时触发, onpageshow 事件在每次加载页面时触发,即 onload 事件在页面从浏览器缓存中读取时不触发。

为了查看页面是直接从服务器上载入还是从缓存中读取,你可以使用 PageTransitionEvent 对象的 persisted 属性来判断。 如果页面从浏览器的缓存中读取该属性返回 ture,否则返回 false

解决方案

一、通过onload方式

代码如下:

页面中写一个隐藏的input

python 复制代码
<input type="hidden" id="refreshed" value="no">

js操作如下

ini 复制代码
    onload=function(){
        var refreshedId=document.getElementById("refreshed");
        if(refreshedId.value=="no"){
            refreshedId.value="yes";
           } else{
             refreshedId.value="no";
             location.reload();
         }
    }

二、通过onpageshow 方式

这种方式在电脑上是没有问题的,但是苹果safari中返回不执行onload事件,要用如下方式:

javascript 复制代码
window.onpageshow = function(event) {
    if (event.persisted) {
        window.location.reload() 
    }
};

通过实际操作发现,event.persisted在电脑中一直是返回false,但是在手机safari中是没有问题的。

三、综合解决方案

因此,可以如下写代码:

ini 复制代码
  if ((/iphone|ipod|ipad.*os 5/gi).test(navigator.appVersion)) {
        window.onpageshow = function(event) {
            if (event.persisted) {
                window.location.reload() 
            }
        };
    }else{
        onload=function(){
            var refreshedId=document.getElementById("refreshed");
            if(refreshedId.value=="no"){
                refreshedId.value="yes";
               } else{
                 refreshedId.value="no";
                 location.reload();
             }
        }
    }

通过上面代码发现在safari中第一次打开页面的时候,有时候会出现闪屏效果。

添加如下代码:

javascript 复制代码
$(window).bind("unload", function() { });

就没有再出现闪屏效果了。

四、通过iframe方式阻止缓存

页面中添加如下代码

css 复制代码
<iframe style="height:0px;width:0px;visibility:hidden" src="about:blank">
this prevents back forward cache
</iframe>

这种方式有待验证。

五、清除缓存方式

我之前博客中也写过清除浏览器缓存的几种方式,但是这种方式,经过验证,不起作用。

六、通过时间戳强制刷新方式

下面代码是针对iPad中safari返回按钮问题

ini 复制代码
var showLoadingBoxSetIntervalVar;
var showLoadingBoxCount = 0;
var showLoadingBoxLoadedTimestamp = 0

function showLoadingBox(text) {

    var showLoadingBoxSetIntervalVar=self.setInterval(function(){showLoadingBoxIpadRelaod()},1000);
    showLoadingBoxCount = 0
    showLoadingBoxLoadedTimestamp = new Date().getTime();

    //Here load the spinner

}

function showLoadingBoxIpadRelaod()
{
    //计算时间超过500毫秒
    var diffTime = ( (new Date().getTime()) - showLoadingBoxLoadedTimestamp - 500)/1000;

    showLoadingBoxCount = showLoadingBoxCount + 1;
    var isiPad = navigator.userAgent.match(/iPad/i) != null;

    if(diffTime > showLoadingBoxCount && isiPad){
        location.reload();
    }
}

七、 单页tab,返回并刷新页面

针对单页tab,点击切换,或者点击进入详情等,需要,每次点击单页的时候 window.history.pushState一下页面数据,再次返回的时候就会刷新页面。备注,pushState的第一个参数state不能为空。例如如下:

javascript 复制代码
  window.history.pushState({
    url: `${pathname}?${params}`,
    prev: window.location.href,
    time: (new Date()).getTime()
  }, null, `${pathname}?${params}`)

就可以了。

一般这样就可以解决了。

其实假如每次历史都会改变,也可以监听如下

javascript 复制代码
  window.addEventListener("popstate", function(e) { 
    // console.log(e.state, history.state)
    // reload方法
  }, false);

也是可以解决的,但是这个的前提是每次历史数据都更改,否则仅进入最后一次。

参考

关于onpageshow 事件,感兴趣的可以参考MDN中的文档:developer.mozilla.org/en-US/Firef...

History API: developer.mozilla.org/zh-CN/docs/...

onpopstate: developer.mozilla.org/zh-CN/docs/...

相关推荐
好_快8 分钟前
Lodash源码阅读-baseUniq
前端·javascript·源码阅读
不秃的开发媛8 分钟前
前端技术Ajax入门
java·开发语言·前端
牧羊狼的狼13 分钟前
React.memo 和 useMemo
前端·javascript·react.js
xixixin_21 分钟前
【uniapp】vue2 搜索文字高亮显示
java·服务器·前端·uni-app·交互·文字高亮
还是鼠鼠25 分钟前
Android移动应用开发入门示例:Activity跳转界面
android·前端·gitee·android studio·android-studio
不知疲倦的仄仄29 分钟前
跨域 同源策略通俗讲解
前端·后端·spring·edge浏览器
珹洺34 分钟前
Jsp技术入门指南【十】IDEA 开发环境下实现 MySQL 数据在 JSP 页面的可视化展示,实现前后端交互
java·运维·前端·mysql·intellij-idea·jsp
excel38 分钟前
webpack 运行时模版 第 六 节 /lib/RuntimeTemplate.js
前端
excel40 分钟前
webpack JS meta 信息插件 /lib/JavascriptMetaInfoPlugin.js
前端
前端极客探险家40 分钟前
前端 Excel 工具组件实战:导入 → 可编辑表格 → 导出 + 样式同步 + 单元格合并
前端·typescript·vue·excel