如何使用 Javascript 將查詢參數 append 作為我的 URL 的查詢參數？

Question

我正在構建一個 web 應用程序，我正在使用 Firebase 將我的用戶數據存儲在 Cloud Firestore 中。 我的 web 應用程序上有一個頁面允許用戶從 Cloud Firestore 查看他們的文檔。 我想在 view.html 上的view.html末尾添加一個查詢參數，這樣我就可以獲取該查詢參數值並使用它來搜索文檔。

我一直在網上搜索以找到可能的解決方案。 到目前為止，我已經看過一些關於該主題的視頻，但它們並沒有深入到我需要的深度。 例如，此視頻展示了如何從 URL 添加和獲取查詢參數，但它僅展示了如何在控制台中記錄這些更改。 我如何使它成為我的 URL？

我也一直在瀏覽 Stackoverflow 尋找解決方案。 This Stackoverflow post問了一個類似的問題，但是，答案中的許多解決方案都會導致view.html在循環中重新加載。 為什么會這樣，如果這是一個可能的解決方案，我將如何阻止這種情況發生。

我 go 如何在 Javascript 中追加和獲取 URL 查詢參數？

Answer 1

你說你想在 javascript 中執行此操作，所以我假設頁面本身正在構建/修改指向頁面上任一位置的鏈接或 go 直接通過 javascript。

javascript在瀏覽器中有URL object，可以構建和分解URL

let thisPage = new URL(window.location.href);
let thatPage = new URL("https://that.example.com/path/page");

在任何情況下，一旦您擁有 URL object，您就可以訪問它的各個部分以讀取和設置值。

添加查詢參數使用 URL 的searchParams屬性，您可以在其中使用.append方法添加參數——您不必擔心管理? 和& … 該方法會為您處理。

thisPage.searchParams.append('yourKey', 'someValue');

這演示了它在此頁面上的實時顯示，添加搜索參數並在每個步驟中顯示 URL：

 let here = new URL(window.location.href); console.log(here); here.searchParams.append('firstKey', 'theValue'); console.log(here); here.searchParams.append('key2', 'another'); console.log(here);

Answer 2

我已經用最簡單的方法解決了這個問題。 我忘記了我可以通過將搜索參數添加到 URL 來鏈接到view.html 。這是我所做的：

在我鏈接到index.html的view.html ，我創建了 function openViewer(); . 我把參數加到URL href的末尾。

function openViewer() {
     window.location.href = `view.html?id={docId}`;
}

然后在view.html上，我使用URLSearchParameters得到了參數，如下所示：

const thisPage = new URL(window.location.href);
var id = thisPage.searchParams.get('id');

console.log(id)

頁面的新 URL 現在是“www.mysite.com/view.html?id=mydocid”。

Answer 3

您可以嘗試在實際視圖中推送state.html

<script>
  const thisPage = new URL(window.location.href);
  window.history.pushState("id","id",thisPage);
</script>