<a href> 将查询参数添加到当前现有查询参数的链接

编程问答 2022-06-02

问题描述

如何创建 <a href="?param2=17"> 链接，以便：

  • 如果浏览器中的当前 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：将查询参数添加到当前 URL 而不是完全删除当前查询参数的链接。

如果 HTML 无法实现，那么最简单的 Javascript 方法是什么？

解决方法

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

,

基于@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>

htmlhyperlinkhyperlinkjavascriptquery-parameters