在不刷新的情况下将参数附加到 URL

Question

我知道这个问题之前已经被问过很多次了，但是答案不够详细，无法解决我的问题。我不想更改整个 URL 页面。我想在不刷新的情况下单击按钮时附加参数 &item=brand。

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

使用 window.location.hash = "&item=brand"; 追加而不刷新，但使用散列 # 消除参数的 usage/effect。我试图在添加后删除散列，但没有成功。

This answer等很多建议使用HTML5HistoryAPI，特别是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 将参数附加到 existing/current URL。或者如何为相同目的设置片段标识符。一个很好的教程、演示或一段带有一点解释的代码会很棒。

Demo 到目前为止我所做的事情。非常感谢您的回答。

Answer 1

您可以使用 pushState or replaceState 方法，即：

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

或

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

参数示例：

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

Answer 2

如果有人想将参数添加到更复杂的 url（我的意思是 https://whosebug.com/questions/edit?newParameter=1），以下代码对我有用：

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

希望对您有所帮助！

Answer 3

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}`)
    : "";
}

Answer 4

如果你想同时添加和删除参数，你也可以使用URL API:

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

Answer 5

修改了 Medhi 答案，这就成功了

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);
    }
}

在不刷新的情况下将参数附加到 URL

Appending parameter to URL without refresh

javascript

jquery

html

pushstate

html5-history