JS 修改地址栏URL参数 不跳转
let url = changeURLParam(location.href, name, value); // 修改 URL 参数history.replaceState(null, null, url);// 替换地址栏不跳转
使用 History.replaceState()
replaceState()
方法使用 state objects
, title
和 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
更多推荐
所有评论(0)