如何使用Javascript向我的URL添加查询参数？

Question

我正在构建一个 Web 应用程序，并使用 Firebase 将用户数据存储在 Cloud Firestore 中。我的 Web 应用程序中有一个页面，允许用户查看他们在 Cloud Firestore 中的文档。我想在 view.html 的 URL 结尾添加查询参数，以便我可以获取该查询参数值并将其用于搜索文档。

我一直在网上寻找可能的解决方案。到目前为止，我已经找到了一些关于此主题的视频，但它们没有深入探讨我需要的内容。例如，this video 演示了如何从 URL 添加和获取查询参数，但它只显示了如何将这些更改记录在控制台中。我该如何将其应用到我的 URL 上？

我还在 Stackoverflow 上浏览解决方案。This Stackoverflow post 提出了类似的问题，然而，答案中的许多解决方案会导致 view.html 不断重新加载。为什么会这样，如果这是一个可能的解决方案，我该如何防止这种情况发生。

我该如何在Javascript中添加和获取URL查询参数？

- michaelderiso

---

这是什么类型的应用程序？您是否使用任何框架？ - Aluan Haddad

@AluanHaddad 这是一个使用HTML、CSS和Javascript的标准Web应用程序。我只使用了jQuery和Firebase SDK这两个框架。出于学习目的，我尽量坚持使用原生的Javascript，这也是为什么我在问题中特别要求JS解决方案的原因。由于我是新手，所以我正在尽可能地掌握基础知识。 - michaelderiso

太好了听到这个消息。太多人开始使用非常复杂的东西，比如Angular，却从未真正学习JavaScript。我只是问一下，因为许多框架都集成了客户端路由，你需要了解它们的行为并且可以利用它。 - Aluan Haddad

Answer 1

您说想在javascript中完成此操作，因此我假定页面本身正在使用javascript构建/修改链接，以便在页面上放置或直接跳转。

在浏览器中，javascript有一个URL对象，可以构建和分解URL。

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

无论如何，一旦您拥有URL对象，就可以访问其部分以读取和设置值。

通过使用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);

- Stephen P

---

使用 searchParams 添加参数是有效的，新的 URL 已经成功地在控制台中记录了它的搜索参数。然而，我仍然不确定我的问题的第二部分：如何使带有搜索参数的 URL 成为页面的 URL，而不仅仅是将其记录到控制台中。我尝试过 window.location.href = here，但是页面会陷入无限循环中，直到我断开与页面的连接才会停止，这样会一直添加参数到 URL 中。 - michaelderiso

@m_de41 — 我猜测无限循环可能是由于您的代码被调用的方式...在页面加载时？当用户执行某些操作时？...但是您根本没有展示任何代码，所以无法确定。 - Stephen P

@StephenP console.log(here) 现在将变为 console.log(here.href)。 - node_saini

@node_saini，实际上并不是“现在”的问题，一直都是这样的……区别在于here是一个对象而here.href是一个字符串。URL实例方法toString与URL.href相同，因此console.log(here)与console.log(here.toString())与console.log(here.href)相同（除了在浏览器调试器中，其中console.log(here)可能会输出URL对象结构）。 - Stephen P

Answer 2

您可以尝试在实际的 view.html 中将状态以这样的方式推送。

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

- M. Richard

Answer 3

我用最简单的方法解决了这个问题。我忘记了可以通过在URL中添加搜索参数来链接到view.html。这是我所做的：

在链接到view.html的index.html页面上，我创建了函数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)

页面的新网址现在是“www.mysite.com/view.html?id=mydocid”。

- michaelderiso