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

问题背景

今天有一个刷新的需求，先后使用了reload()、replace 方法以及window.location.href三种方式，结果都只是在pc端没问题，移动端微信中浏览失败。之后在相应js中加了alert事件，结果发现仅在第一次进入页面时执行了，再次刷新时并未执行，故目前怀疑是微信中默认缓存了静态资源。 至于用怀疑一词，是由于在网上找了好久，基本都只说了方案，对于产生原因却很少有人提及，另根据reload()的说明，当有参数true时（即reloa(true)），浏览器应当已经绕过缓存重新从服务器获取了一份，但实际在微信中浏览发现js文件依旧未重新执行，故目前仅是怀疑状态，尚未找到真正原因所在。

解决方案

目前使用的解决方案为在地址后面添加随机数，从而欺骗浏览器url改变了，使其向服务器发送请求而不去读缓存。 [toggle hide=“no” title=“实现代码” color=“red”]

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，说明不是第一次进入，故截取出当前地址并在后面拼接随机数，反之直接拼接随机数。具体使用方式请根据个人需求自行修改。 [/toggle]

课外延伸

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 处的所有字符，其长度为 stop 减start。

说明

substring() 方法返回的子串包括 start 处的字符，但不包括 stop 处的字符。 如果参数 start 与 stop 相等，那么该方法返回的就是一个空串（即长度为 0 的字符串）。如果 start 比 stop 大，那么该方法在提取子串之前会先交换这两个参数。

提示和注释

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

substr() 方法

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

语法

stringObject.substr(start,length)

| 参数       | 描述                                                                                     |
| -------- | -------------------------------------------------------------------------------------- |
| *start*  | 必需。要抽取的子串的起始下标。必须是数值。如果是负数，那么该参数声明从字符串的尾部开始算起的位置。也就是说，-1 指字符串中最后一个字符，-2 指倒数第二个字符，以此类推。 |
| *length* | 可选。子串中的字符数。必须是数值。如果省略了该参数，那么返回从 *stringObject* 的开始位置到结尾的字串。                            |

返回值

一个新的字符串，包含从 stringObject 的 start（包括 start 所指的字符） 处开始的 length 个字符。如果没有指定 length，那么返回的字符串包含从 start 到 stringObject 的结尾的字符。

提示和注释

注释：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() 方法

[callout class=“info” title=“”]华丽分割[/callout] [caption id=“” align=“aligncenter” width=“600”] 提高手机摄影技术的小技巧[/caption]