JS location.href不重新刷新当前页面

本文链接： https://blog.csdn.net/qq_33909701/article/details/90546592

前言：

前两天在工作中遇到location.href刷新页面不成功的问题，于是在此记录一下。

我的需求：

用Ajax请求后端返回数据和跳转的链接，其中返回的链接有可能是新的url也有可能是当前页面地址栏上的url。刚开始我直接使用window.location.href=url.来实现，即无论返回的什么url我都用window.location.href帮我重定向。

但是后来在测试的时候出现了问题。如果返回的url是新页面的地址，那么window.location.href可以成功跳转，但倘若是当前页面地址栏上的url，就会没有任何反应。后来我上网搜了一下，发现出现这类的情况很少，最多的也是form提交或者a标签跳转不起作用之类的。但是这些都不是我想要的答案。

再后来，我发现跳转页面或者刷新页面有许多类似的方法，例如window.location.replace，window.reload()等。但是window.location.replace和上面的效果一样，都不会重新刷新当前页面。于是我在想是不是因为url的问题呢，即url不变，他就不触发跳转？

带着这个疑惑我又去google了一下，结果还真是，但是具体原因我也没明白，如果有知道的同学希望能够在评论里解释一下或者贴一下较为官方的文档哈。

最后我在这里写一下几种解决方案：

1.使用location.href和location.reload();

var function=function(){
    ... //省略ajax
    window.location.href=data.url  //假设后端传回url
    window.location.reload()       //无论url是什么，强制刷新页面，另外reload()有true和false参
                                   //数，具体请自行百度。
    ...
}

2.使用form表单提交

var function=function(){
    .... //省略ajax
    var url=data.url
    document.write("<form action=“+url+” method=post name=form style='display:none'>");  
    document.write("<input type=hidden/>");  
    document.write("</form>");  
    document.form.submit();  
}

3.时间戳

var function=function(){
   ...//省略ajax
   window.location.href=data.url+"?time="+new Data().getTime();//加一个时间变量，让每次请求的url都不一样
}

总结：最终我是使用第一种，先传入url，然后再强制刷新，这种会重新加载页面。第二种和第一种差不多，比较适合post请求。第三种会在url后面加参数，谨慎使用。

JS location.href不重新刷新当前页面

猜你喜欢