从 url 中删除搜索查询而不刷新页面？

Posted 2023-02-22

【中文标题】从 url 中删除搜索查询而不刷新页面？

【英文标题】：Remove search query from url without refreshing the page?

【发布时间】：2021-04-30 04:56:25

【问题描述】：

我有一个简单的任务！我希望当我提交表单并获得表单的成功或错误消息时，我直接转到表单（使用锚点），所以为了做到这一点，我在 from 操作的 URL 中添加了一个参数，就像这样：

action="%%url%%?form-submitted=true"

当表单提交时，我写了这段代码：

// This script is for moving the page to the form is the page is loaded by submitting the form
let pageUrl = window.location.href;

let url = new URL(pageUrl);
let formSubmitted = url.searchParams.get("form-submitted");

if(formSubmitted)
    window.location.href = "#form-container";

代码工作得很好，提交表单时我正在移动到我的表单，但是如果我在页面中滚动并检查幻灯片，例如我决定刷新页面，表单提交的参数是在 URL 中，所以刷新时我会再次进入表单，这并不令人愉快。

为了解决这个问题，我必须在不刷新页面的情况下从 URL 中删除查询参数，我尝试了这个：

// This script is for moving the page to the form is the page is loaded by submitting the form
let pageUrl = window.location.href;

let url = new URL(pageUrl);
let formSubmitted = url.searchParams.get("form-submitted");

history.pushstate(, null, '');

if(formSubmitted)
    window.location.href = "#form-container";

我只是保留我的域和锚标记，但似乎什么都没有发生。

【参考方案1】：

尝试将原始 url 和路径仅添加到您的 url 参数中以获取 history.pushState：

let url = new URL(window.location.href);
history.pushState(, null, url.origin + url.pathname);

使用history，您也可以只使用相对网址：

let url = new URL(window.location.href);
history.pushState(, null, url.pathname);

另请参阅URL Constructor（您已在示例中使用）。

您的原始代码不起作用的原因是history.pushState() 中的url 是可选的，而空字符串'' 是虚假的。因此，在您的情况下，由于未使用真实值指定此参数，因此将其设置为文档的当前 URL。