2

我有一个简单的任务！我希望当我提交表单并获得表单的成功或错误消息时，我直接转到表单（使用锚点），所以为了做到这一点，我在我的 from action 的 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";
}

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

4

1 回答 1

0

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

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

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

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

另请参阅URL 构造函数（您已在示例中使用）。

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

于 2021-02-16T21:20:38.063 回答