location.replace() 和 location.re

2018-07-04  本文已影响0人  溺水的鱼_fb44

?xml version="1.0" encoding="UTF-8"?

混合开发时,遇到个场景是在当前URL后面拼接参数,同时页面数据更新,但是不会影响页面的history。处理history堆栈时,使用的是pushState(),在处理页面刷新时,遇到了reload和replace,就按照现有场景分别写了两个方法。

代码如下:

setHistoryReplace() {

    varstate={

        userId:3333,

        hello:'hi',

        url:window.location.href

    };

    leturl=window.location.href+'&User-Id=3333'

    window.history.replaceState(state,'',url);

    window.location.replace(url);

},

setHistoryLoad() {

    varstate={

        userId:3333,

        hello:'hi',

        url:window.location.href

    };

    leturl=window.location.href+'&User-Id=3333'

    window.history.replaceState(state,'',url);

    window.location.reload();

}

但是在测试后,并没有发现replace不能返回当前页面的事情,和 reload的可视表现行为一致,不知道是不是代码写的有问题。

最后找到原因,不是代码不对,是适应场景不对。

参考截图

修改后,在B页面添加方法

setHistory() {

    varstate={

        userId:3333,

        hello:'hi',

        url:window.location.href

    };

    leturl=window.location.href+'&User-Id=3333'

    window.history.replaceState(state,'',url);

    window.location.replace('C页面地址');

},

加载A页面,在进入B页面,返回A页面,在 A页面 触发replace,URL为当前页面,只是在URL后面拼接了一个参数,然后,点击页面的前进和返回都能正常表现。因为是拿的当前页替换的当前页,所以返回的页面没有变化,但是地址会有变化。

replace比较符合定义的使用场景应该是这个样子,在A页面中,进入B页面,然后在B页面触发replace(),URL地址是C页面的地址,然后这个时候点击浏览器返回,返回到A页面,而不是B页面。

参考: mozilla文档

参考截图的链接

上一篇下一篇

猜你喜欢

热点阅读