问题描述

今天后端同事找我，问我一个关于js无需刷新在url地址添加参数的方法。

然后我百度啊，终于在一篇文章找到了办法，非常简单的一句代码。

window.history.pushState({}, 0,  window.location.href + '?' + 参数);

假如你的url地址是demo.html，然后在url部分需要添加参数“type=weixin”，然后你可以这样写：

window.history.pushState({}, 0,  window.location.href + '?type=weixin');

然后你就会不刷新就可以在url后面添加参数，这个url已经变成“demo.html?type=weixin”

pushState()

增改记录: history.pushState() , history.replaceState()

HTML5为history对象添加了两个新方法，history.pushState()和history.replaceState()，用来在浏览历史中添加和修改记录。state属性用来保存记录对象，而popstate事件用来监听history对象的变化

pushState方法不会触发页面刷新，只是导致history对象发生变化，地址栏会有反应。

history.pushState()方法向浏览器历史添加了一个状态(增加一个记录)。pushState()方法带有三个参数：一个状态对象、一个标题(现在被忽略了)以及一个可选的URL地址。

history.pushState(state, title, url);

state object —— 状态对象是一个由pushState()方法创建的、与历史纪录相关的javascript对象。当用户定向到一个新的状态时，会触发popstate事件。事件的state属性包含了历史纪录的state对象。如果不需要这个对象，此处可以填null

title —— 新页面的标题，但是所有浏览器目前都忽略这个值，因此这里可以填null

URL —— 这个参数提供了新历史纪录的地址。新URL必须和当前URL在同一个域，否则，pushState()将丢出异常。这个参数可选，如果它没有被特别标注，会被设置为文档的当前URL

replaceState(参数与上相同)

把当前的页面的历史记录替换掉

他们最大的特点是添加或替换历史记录后，浏览器地址栏会变成你传的地址，而页面并不会重新载入或跳转。

举例

例如，假设当前的页面地址是example.com/1.html，且history中此时只有一条当前页面的记录。

当你执行 history.pushState(null, null, “2.html”)后，浏览器的地址栏会显示example.com/2.html，但并不会跳转到2.html，甚至并不会去检查2.html存不存在，只是加入一个最新的历史记录项。此时history中会有两个记录。假如你此时点击页面上的link跳转到另外一个页面后，点击浏览器的后退按钮，则url会变成example.com/2.html，如果此前的1.html的页面浏览器有缓存的话会显示1.html的内容，否则会发起请求example.com/2.html。如果再次点后退，url会变成example.com/1.html。

而如果执行 history.replaceState(null, null, “2.html”)的话，浏览器的地址栏也会显示example.com/2.html，区别是history中只有当前2.html的记录，而1.html的记录已被替换掉。

利用这些特性，可以用来修改当前页面的URL来达成某些目的，比如可以用来记住搜索条件。

封装

function replaceParamVal(paramName, replaceWith, isRefresh) {
    var oUrl = this.location.href.toString();
    if (paramName && replaceWith) {
        if (oUrl.indexOf(paramName + "=" + replaceWith) > 1) {
            return;
        }
    }
    if (oUrl.indexOf('&'+paramName+'=') > 0) {
        var re = eval('/(&' + paramName + '=)([^&]*)/gi');
        var nUrl = oUrl.replace(re, '&'+paramName + '=' + replaceWith);
    } else {
        if (oUrl.indexOf("?") > 0) {
            var nUrl = oUrl + "&" + paramName + "=" + replaceWith;
        } else {
            var nUrl = oUrl + "?" + paramName + "=" + replaceWith;
        }
    }
   // this.location = nUrl;
    if (isRefresh) {
        window.location.href = nUrl
    }
    var stateObject = { id: "" };
    var title = "";
    history.replaceState(stateObject, title, nUrl);
}

URL替换指定传入参数的值,paramName为参数,replaceWith为新值，isRefresh为是否刷新页面,0表示不需要刷新。

比如：https://www.wubin.work/

上面这个地址js调用方法：

replaceParamVal("popenid","600",0)

就会在地址栏上修改参数popenid=600，不会刷新页面,新地址变为：

https://www.wubin.work/?popenid=600

调用方法：replaceParamVal("puid","600",1),表示在地址栏上修改成正确的参数puid=600，然后刷新页面

相关资料