<a href> link 将查询参数添加到当前存在的查询参数

Question

如何创建 <a href="?param2=17"> link 使得：

如果浏览器中当前URL是example.com/index.html，点击它会导致example.com/index.html?param2=17
如果浏览器中当前URL是example.com/index.html?foo=bar，点击它会导致example.com/index.html?foo=bar&param2=17 而不是 example.com/index.html?param2=17
如果浏览器中当前URL是example.com/index.html?foo=bar&param2=10，点击它会导致example.com/index.html?foo=bar&param2=17 而不是 example.com/index.html?foo=bar&param2=10&param2=17

TL;DR: link 将查询参数添加到当前 URL 而不是完全删除当前查询参数.

如果 HTML 做不到，最简单的 Javascript 方法是什么？

Answer 1

向您的 a 标记添加一个 onclick 属性并实现回调获取事件目标并将其与 window.location.

合并

Answer 2

根据@MetallimaX 的回答，这是一个可行的解决方案：

function update(a, b) {
    var searchParams = new URLSearchParams(window.location.search);
    if (b != '')
        searchParams.set(a, b);
    else
        searchParams.delete(a);
    window.location.search = searchParams.toString();
}

<a onclick="update('foo', 'bar');">Click on my link</a>

<a href> link 将查询参数添加到当前存在的查询参数

<a href> link that adds query parameter to currently existing query parameters

html

javascript

hyperlink

query-parameters