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

Question

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

我一直在网上搜索以找到可能的解决方案。到目前为止，我已经看过一些有关该主题的视频，但是它们并没有深入到我所需要的深度。例如，this video显示如何从URL添加和获取查询参数，但仅显示如何在控制台中记录这些更改。我该如何设定我的网址？

我也正在浏览Stackoverflow寻找解决方案。 This Stackoverflow post提出了类似的问题，但是，答案中的许多解决方案导致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。这是我所做的：

在我链接到index.html的view.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)

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