解决办法:
document.referrer?location.href=document.referrer:history.back();
为什么会存在需要判断的情况呢,因为referrer是存在获取不到的可能性的。一般正常流程是没有问题的。往下面看,就知道了。
接下来是原因:
H5开发实际过程中:我们在提交了表单之后,很多需要返回列表页面,一般情况是使用:
history.go(-1);
//或者
history.back();
但是,会造成列表页面不会刷新,新提交或者修改的数据不会显示的问题
很多网上资料说使用:
location.reload();
来进行刷新,可能在pc端是正常可以使用的,但是h5页面是不可用的
接下来介绍一下:
location.href=document.referrer;
javascript 有一个可以获取前一页面的URL地址的方法:document.referrer
document.referrer 的来源
- referrer 属性可返回载入当前文档的文档的 URL【摘自W3CSHCOOL】, 如果当前文档不是通过超链接访问的,那么当前文档的URL为NULL,这个属性允许客户端的 javascript 访问 HTTP 头部;
- referrer 属性,我们可以从 http 头部获取
document.referrer 的兼容性
document.referrer IE7都支持,它的兼容性比较高,Android 5.0开始支持,iOS都支持,PC端浏览器从IE7就开始支持了,兼容性没有什么大的问题。
但是有个小小的问题,就是 IE 会主动清除 referref 属性。在IE中用javascript做跳转,比如用window.location.href = “”; google如果使用document.referrer无法取到浏览器请求的HTTP referrer,因为IE清空了。而其他主流浏览器Firefox和Chrome都会保留referrer,没办法,只好判断,如果是IE浏览器,就主动给它增加一个 referrer 。这样的原理就是给IE浏览器的页面偷偷加了个链接,然后自动点这个链接,于是referrer就能保留了。
无法获取 referrer 信息的情况
下面的场景无法获得 referrer 信息,以下前8条属于【张鑫旭】:
- 直接在浏览器中输入地址
- 使用
location.reload()
刷新(location.href
或者location.replace()
刷新有信息) - 在微信对话框中,点击进入微信自身浏览器
- 扫码进入微信或QQ的浏览器
- 直接新窗口打开一个页面
- 从https的网站直接进入一个http协议的网站(Chrome下亲测)
a
标签设置rel="noreferrer"
(兼容IE7+)meta
标签来控制不让浏览器发送referer
- 点击 flash 内部链接
- Chrome4.0以下,IE 5.5+以下返回空的字符串
- 使用 修改 Location 进行页面导航的方法,会导致在IE下丢失 referrer,这可能是IE的一个BUG
- 跨域