微信浏览器中reload()无法完成刷新页面的解决方案

问题背景

今天有一个刷新的需求,先后使用了reload()、replace 方法以及window.location.href三种方式,结果都只是在pc端没问题,移动端微信中浏览失败。之后在相应js中加了alert事件,结果发现仅在第一次进入页面时执行了,再次刷新时并未执行,故目前怀疑是微信中默认缓存了静态资源。

至于用怀疑一词,是由于在网上找了好久,基本都只说了方案,对于产生原因却很少有人提及,另根据reload()的说明,当有参数true时(即reloa(true)),浏览器应当已经绕过缓存重新从服务器获取了一份,但实际在微信中浏览发现js文件依旧未重新执行,故目前仅是怀疑状态,尚未找到真正原因所在。

解决方案

目前使用的解决方案为在地址后面添加随机数,从而欺骗浏览器url改变了,使其向服务器发送请求而不去读缓存。

实现代码

var len = window.location.href.indexOf("?");
if(len>0){
	window.location.href=window.location.href.substring(0,len)+"?"+Math.random();
}else{
	window.location.href=window.location.href+"?"+Math.random();
}

代码注释:

先创建一个len用来存储地址中?的位置,当大于0,说明不是第一次进入,故截取出当前地址并在后面拼接随机数,反之直接拼接随机数。具体使用方式请根据个人需求自行修改。

课外延伸

1、页面刷新

reload 方法

该方法强迫浏览器刷新当前页面。

语法
location.reload(force)
说明

如果该方法没有规定参数,或者参数是 false,它就会用 HTTP 头 If-Modified-Since 来检测服务器上的文档是否已改变。如果文档已改变,reload() 会再次下载该文档。如果文档未改变,则该方法将从缓存中装载文档。这与用户单击浏览器的刷新按钮的效果是完全一样的。

如果把该方法的参数设置为 true,那么无论文档的最后修改日期是什么,它都会绕过缓存,从服务器上重新下载该文档。这与用户在单击浏览器的刷新按钮时按住 Shift 健的效果是完全一样。

replace 方法

语法
location.replace(newURL)
说明

replace() 方法不会在 History 对象中生成一个新的记录。当使用该方法时,新的 URL 将覆盖 History 对象中的当前记录。

该方法通过指定URL替换当前缓存在历史里(客户端)的项目,因此当使用replace方法之后,你不能通过“前进”和“后退”来访问已经被替换的URL。

实际应用场景

(此处来源网络,请酌情参考)

在实际应用的时候,重新刷新页面的时候,我们通常使用: location.reload() 或者是 history.go(0) 来做。

因为这种做法就像是客户端点F5刷新页面,所以页面的method="post"的时候,会出现"网页过期"的提示。那是因为Session的安全保护机制。

可以想到: 当调用 location.reload() 方法的时候, aspx页面此时在服务端内存里已经存在, 因此必定是 IsPostback 的。

如果有这种应用: 我们需要重新加载该页面,也就是说我们期望页面能够在服务端重新被创建, 我们期望是 Not IsPostback 的。这里,location.replace() 就可以完成此任务。被replace的页面每次都在服务端重新生成。

2、字符串截取

substring() 方法

substring() 方法用于提取字符串中介于两个指定下标之间的字符

语法
stringObject.substring(start,stop)

参数

描述

start

必需。一个非负的整数,规定要提取的子串的第一个字符在 stringObject 中的位置。

stop

可选。一个非负的整数,比要提取的子串的最后一个字符在 stringObject 中的位置多 1。 如果省略该参数,那么返回的子串会一直到字符串的结尾。

返回值

一个新的字符串,该字符串值包含 stringObject 的一个子字符串,其内容是从 start 处到 stop-1 处的所有字符,其长度为 stopstart

说明

substring() 方法返回的子串包括 start 处的字符,但不包括 stop 处的字符。

如果参数 startstop 相等,那么该方法返回的就是一个空串(即长度为 0 的字符串)。如果 startstop 大,那么该方法在提取子串之前会先交换这两个参数。

提示和注释

重要事项:与 slice() 和 substr() 方法不同的是,substring() 不接受负的参数。

substr() 方法

substr() 方法可在字符串中抽取从 start 下标开始的指定数目的字符。

语法

stringObject.substr(start,length)

参数

描述

start

必需。要抽取的子串的起始下标。必须是数值。如果是负数,那么该参数声明从字符串的尾部开始算起的位置。也就是说,-1 指字符串中最后一个字符,-2 指倒数第二个字符,以此类推。

length

可选。子串中的字符数。必须是数值。如果省略了该参数,那么返回从 stringObject 的开始位置到结尾的字串。

返回值

一个新的字符串,包含从 stringObjectstart(包括 start 所指的字符) 处开始的 length 个字符。如果没有指定 length,那么返回的字符串包含从 startstringObject 的结尾的字符。

提示和注释

注释:substr() 的参数指定的是子串的开始位置和长度,因此它可以替代 substring() 和 slice() 来使用。

重要事项:ECMAscript 没有对该方法进行标准化,因此反对使用它。

重要事项:在 IE 4 中,参数 start 的值无效。在这个 BUG 中,start 规定的是第 0 个字符的位置。在之后的版本中,此 BUG 已被修正。

slice() 方法

slice() 方法可提取字符串的某个部分,并以新的字符串返回被提取的部分。

语法
stringObject.slice(start,end)

参数

描述

start

要抽取的片断的起始下标。如果是负数,则该参数规定的是从字符串的尾部开始算起的位置。也就是说,-1 指字符串的最后一个字符,-2 指倒数第二个字符,以此类推。

end

紧接着要抽取的片段的结尾的下标。若未指定此参数,则要提取的子串包括 start 到原字符串结尾的字符串。如果该参数是负数,那么它规定的是从字符串的尾部开始算起的位置。

返回值

一个新的字符串。包括字符串 stringObject 从 start 开始(包括 start)到 end 结束(不包括 end)为止的所有字符。

说明

String 对象的方法 slice()、substring() 和 substr() (不建议使用)都可返回字符串的指定部分。

slice() 比 substring() 要灵活一些,因为它允许使用负数作为参数

slice() 与 substr() 有所不同,因为它用两个字符的位置来指定子串,而 substr() 则用字符位置和长度来指定子串。

还要注意的是,String.slice() 与 Array.slice() 相似。

参考资料

解决微信浏览器无法使用reload()刷新页面

HTML DOM reload() 方法

HTML DOM replace() 方法

JS刷新当前页面的几种方法总结

JavaScript substring() 方法

JavaScript substr() 方法

JavaScript slice() 方法

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏懒人开发

Centos上phpstudy搭建

自己最近也没有怎么弄过linux了 一些原因,自己买了一个Centos的腾讯云服务器 既然买了玩玩,就不要放着了 自己搭建一个php的集成环境 向所有认...

1.5K30
来自专栏懒人开发

被拆掉两次的亭子 - 哈佛家训

文章转自: http://blog.sina.com.cn/s/blog_b74ee81d0101hvwy.html

16720
来自专栏yl 成长笔记

消息队列的使用 RabbitMQ(一): 安装与总体介绍

RabbitMQ 是一款开源且比较流行的消息中间件。但用起来还是比较麻烦,有人封装了一层, 这就是 EasyNetQ 。

16220
来自专栏懒人开发

CoordinatorLayout使用(一):Behavior简单理解

CoordinatorLayout出来很久了,时间关系,一直没有怎么弄过 看见简友的描述 r17171709 的 http://www.jianshu.c...

15040
来自专栏yl 成长笔记

域名、主机名、网站名以及 URL 基础概念

这个东西,在百度经验上已经有人讲得非常清楚了, 作为 web 方向的小白, 我写下我的理解,以便日后查看。

1.7K30
来自专栏懒人开发

Eventbus3代码分析(二):注解入门

我们扯淡到java的知识,最好是先参考别人的文章,或者看官方的 自己能力有限,所以只是简单扯扯,有兴趣,最好自己看官方的解释

7410
来自专栏数据库新发现

Qlogic光纤卡安装配置记录及参考

Last Updated: Saturday, 2004-11-06 19:59 Eygle

15040
来自专栏.NET技术

.net core实践系列之短信服务-Sikiro.SMS.Api服务的实现

上篇《.net core实践系列之短信服务-架构设计》介绍了我对短信服务的架构设计,同时针对场景解析了我的设计理念。本篇继续讲解Api服务的实现过程。

21320
来自专栏AI星球

Java Web 从入门到"改行"(1)--基础准备

首先,说明一下,这是一篇关于 Java Web 基础入门的文章,上学期开始学习 Java Web ,看了不少有关 「XXX从入门到精通」的书籍,近期,要帮着导师...

15920
来自专栏懒人开发

CoordinatorLayout使用(二):Behavior流程 和 事件流

上一篇,我们大体理解了 Behavior简单理解 具体代码可以见 https://github.com/2954722256/use_little_demo ...

24260

扫码关注云+社区

领取腾讯云代金券

年度创作总结 领取年终奖励