使用 History.replaceState()

replaceState() 方法使用 state objectstitle 和 URL 作为参数, 修改当前历史记录实体,如果你想更新当前的 state 对象或者当前历史实体的URL来响应用户的的动作的话这个方法将会非常有用。

语法

history.replaceState(stateObj, title[, url]);

参数

  • stateObj

        状态对象是一个 JavaScript 对象,它与传递给 replaceState 方法的历史记录实体相关联.

  • title

        ​​​​大部分浏览器忽略这个参数, 将来可能有用. 在此处传递空字符串应该可以防止将来对方法的更改。或者,您可以为该状态传递简短标题

  • url 可选

        历史记录实体的 URL. 新的 URL 跟当前的 URL 必须是同源; 否则 replaceState 抛出一个异常.

Javascript代码: 

/**
 * changeURLStatic 修改地址栏 URL参数 不跳转
 * @param name
 * @param value
 */
function changeURLStatic(name, value) {
    let url = changeURLParam(location.href, name, value); // 修改 URL 参数
    history.replaceState(null, null, url);  // 替换地址栏
}


/**
 * changeURLParam 修改 URL 参数
 * @param url
 * @param name
 * @param value
 * @returns {string}
 */
function changeURLParam(url, name, value) {
    if (typeof value === 'string') {
        value = value.toString().replace(/(^\s*)|(\s*$)/, ""); // 移除首尾空格
    }
    let url2;
    if (!value) { // remove
        let reg = eval('/(([\?|&])' + name + '=[^&]*)(&)?/i');
        let res = url.match(reg);
        if (res) {
            if (res[2] && res[2] === '?') { // before has ?
                if (res[3]) { // after has &
                    url2 = url.replace(reg, '?');
                } else {
                    url2 = url.replace(reg, '');
                }
            } else {
                url2 = url.replace(reg, '$3');
            }
        }
    } else {
        let reg = eval('/([\?|&]' + name + '=)[^&]*/i');
        if (url.match(reg)) { // edit
            url2 = url.replace(reg, '$1' + value);
        } else { // add
            let reg = /([?](\w+=?)?)[^&]*/i;
            let res = url.match(reg);
            url2 = url;
            if (res) {
                if (res[0] !== '?') {
                    url2 += '&';
                }
            } else {
                url2 += '?';
            }
            url2 += name + '=' + value;
        }
    }
    return url2;
}


应用示例

参数存在示例:

//当前页面地址
index.php?m=p&a=index&classify_id=225&search=i

//执行修改
changeURLStatic('search', '99999');

//修改后页面地址
index.php?m=p&a=index&classify_id=225&search=99999

参数不存在示例: 

//当前页面地址
index.php

//执行修改
changeURLStatic('m', 'Index');

//修改后页面地址
index.php?m=Index


//执行修改
changeURLStatic('search', '99999');

//修改后页面地址
index.php?m=Index&search=99999

Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐