我在正文中有一個按鈕，一旦單擊，它應該在 URL 中添加一個額外的查詢引數。
let addParam;
const button = document.createElement("BUTTON");
button.textContent = "Add";
document.body.prepend(button);
button.addEventListener("click", () => {
const url = new URL(window.location.href);
url.searchParams.set("param", "value");
window.history.pushState({ path: url.href }, "", url.href);
addParam = addParam ? false : true;
});
它作業正常，問題是當前 URL 已經包含 形式的查詢引數?path=path/to/file，所以當我們用 設定另一個引數時set(key, value)，它會更改?path=path/to/file為?path=path/to/file。有沒有辦法可以防止這種情況發生并保留原始 URL？
uj5u.com熱心網友回復：
請注意，兩個 URL 的含義相同。我猜你更喜歡 with/而不是它的編碼形式，因為它對閱讀 URL 的人來說更明顯。
這可能因瀏覽器而異，但在基于 Chromium 的瀏覽器上，它似乎保留了/if 它在您傳遞給的 URL 中pushState。它是URLSearchParams編碼的/。
我最初發布了一個使用字串連接的解決方案encodeURIComponent，但我的解決方案是使用.append而不是set. 您的代碼正在使用set. 幸運的是，我還提供了第二個解決方案：您可以在添加到搜索引數并將它們轉換為字串之后轉換為/：/
const { origin, pathname, search } = window.location;
const searchParams = new URLSearchParams(search);
searchParams.set("param", "value");
const paramsString = searchParams.toString().replace(///gi, "/");
const url = `${origin}${pathname}?${paramsString}`;
window.history.pushState({ path: url }, "", url);
addParam = addParam ? false : true;
請注意，我不提倡這樣做。我會堅持使用您擁有的代碼。但這是你的專案，所以你可以決定。:-)
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/425070.html
標籤：javascript jQuery dom
下一篇：為什么自動生成的url給出404