如何使用Javascript将查询参数附加到我的URL？

Question

我正在构建一个网络应用程序，并且我正在使用Firebase将用户的数据存储在Cloud Firestore中。我的Web应用程序上有一个页面，允许用户从Cloud Firestore查看他们的文档。我想在我的URL末尾添加一个查询参数，这样我就可以获取该查询参数值并使用它来搜索文档。view.html我一直在网上寻找可能的解决方案。到目前为止，我已经遇到了一些关于这个主题的视频，但它们还没有深入到我一直需要的深度。例如，此视频演示如何从 URL 添加和获取查询参数，但仅演示如何在控制台中记录这些更改。如何将其设为我的网址？我也一直在浏览Stackoverflow以获取解决方案。这个Stackoverflow帖子提出了一个类似的问题，但是，答案中的许多解决方案都会导致在循环中重新加载。为什么会这样，如果这是一个可能的解决方案，我将如何阻止这种情况发生。view.html如何在Javascript中附加和获取URL查询参数？

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 属性，您可以在其中添加参数 - 并且不必担心管理和...该方法为您处理。?&

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

在我链接到的位置上，我创建了函数。我将参数添加到URL href的末尾。index.htmlview.htmlopenViewer();

function openViewer() {

     window.location.href = `view.html?id={docId}`;

}

然后，我得到了这样的参数：view.htmlURLSearchParameters

const thisPage = new URL(window.location.href);

var id = thisPage.searchParams.get('id');

console.log(id)

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