向 URL 追加参数而不刷新

我知道这个问题以前已经被问过很多次了，但是答案并没有足够的描述性来解决我的问题。我不想改变整个网页的 URL。我想附加一个参数 &item=brand的按钮点击没有刷新。

使用 document.location.search += '&item=brand';刷新页面。

使用 window.location.hash = "&item=brand";追加不刷新，但使用散列 #，这消除了参数的使用/效果。我尝试在附加之后删除散列，但是没有用。

这个答案 和许多其他的答案建议使用 HTML5 History API，特别是 history.pushState方法，对于旧的浏览器来说，就是设置一个片段标识符以防止页面重新加载。但是怎么做呢？

假设 URL 是: http://example.com/search.php?lang=en

如何使用 HTML5 pushState 方法或片段标识符追加 &item=brand，以便输出如下: http://example.com/search.php?lang=en&item=brand没有页面刷新？

我希望有人能提供一些关于如何使用 HTML5 pushState 向现有的/当前的 URL 添加参数的信息。或者如何为相同的目的设置片段标识符。一个好的教程，演示或一段代码，一点解释将是伟大的。

演示一下我到目前为止所做的工作。非常感谢您的回答。

124107 次浏览
小开
最佳答案

You can use the pushState or replaceState methods, i.e. :

window.history.pushState("object or string", "Title", "new url");

OR

window.history.replaceState(null, null, "?arg=123");

Example with argument:

var refresh = window.location.protocol + "//" + window.location.host + window.location.pathname + '?arg=1';
window.history.pushState({ path: refresh }, '', refresh);
小开

If anyone wants to add a parameter to a more complex url (I mean, https://stackoverflow.com/questions/edit?newParameter=1), the following code worked for me:

var newurl = window.location.protocol + "//" + window.location.host + window.location.pathname + '?newParameter=1';
window.history.pushState({ path: newurl }, '', newurl);

Hope this helps!

小开 

export function getHash(hash: string, key: string): string | undefined {
return hash
.split("#")
.find((h) => h.startsWith(key))
?.replace(`${key}=`, "");
}
export function setHash(hash: string, key: string, value: string): string {
let hashArray = hash.split("#").filter((h) => !h.startsWith(key));
hashArray.push(`${key}=${value}`);
return hashArray.length > 0
? hashArray.reduce((s1, s2) => `${s1}#${s2}`)
: "";
}
export function deleteHash(hash: string, key: string): string {
let hashArray = hash.split("#").filter((h) => !h.startsWith(key));
return hashArray.length > 0
? hashArray.reduce((s1, s2) => `${s1}#${s2}`)
: "";
}

小开

You can also use URL API if you want to add and remove params at the same time:

const url = new URL(window.location.href);
url.searchParams.set('param1', 'val1');
url.searchParams.delete('param2');
window.history.replaceState(null, null, url); // or pushState
小开

Modified Medhi answer and this did the trick

const insertParam = (key: string, value: string) => {
key = encodeURIComponent(key);
value = encodeURIComponent(value);


let kvp = window.location.search.substr(1).split('&');
if (kvp[0] === '') {
const path = window.location.protocol + "//" + window.location.host + window.location.pathname + '?' + key + '=' + value;
window.history.pushState({ path: path }, '', path);


} else {
let i = kvp.length; let x; while (i--) {
x = kvp[i].split('=');


if (x[0] === key) {
x[1] = value;
kvp[i] = x.join('=');
break;
}
}


if (i < 0) {
kvp[kvp.length] = [key, value].join('=');
}


const refresh = window.location.protocol + "//" + window.location.host + window.location.pathname + '?' + kvp.join('&');
window.history.pushState({ path: refresh }, '', refresh);
}
}

提交答案