如果存在查询字符串，则触发 javascript 函数

Question

所以我有一个表单，一旦提交成功，我就会使用它，它会向 URL 添加一个?success查询字符串。

使用以下代码，每当用户到达?success页面时，它将阻止他们点击后退按钮，这有助于防止提交到数据库 - 问题是，如果我有服务器端错误，它将阻止后退按钮整个页面，直到清除缓存。

function disableBack() {
    window.history.forward()
}

window.onload = disableBack();
window.onpageshow = function(evt) {
    if (evt.persisted)
        evt.preventDefault();
    disableBack()
};

一旦仅存在?success查询字符串，如何使以下 javascript 代码段触发？ 我试过下面的代码，但没有运气：

if (location.search === "?success") {
    // Prevent the form from being resubmitted on backspace
    function disableBack() {
        window.history.forward()
    }

    window.onload = disableBack();
    window.onpageshow = function(evt) {
        if (evt.persisted)
            evt.preventDefault();
        disableBack()
    };
}

更新的答案（它仍然重定向回来）：

function disableBack() {
    window.history.forward()
}

var includesURLSearchString = searchString => location.search.includes(searchString);
var hasQueryString = includesURLSearchString('success');

console.log(hasQueryString);

if (hasQueryString) {

    // Prevent the form from being resubmitted on backspace
    window.onload = disableBack();
    window.onpageshow = function (evt) {
    if (evt.persisted)
        evt.preventDefault();
        disableBack()
    };
}

Answer 1

location.search有一个字符串作为值。 您可以使用includes方法检查字符串是否包含某个单词。 考虑下面的函数。

const includesURLSearchString = searchString => location.search.includes(searchString);

您可以使用此函数来检查是否在location.search字符串中找到了诸如search之类的词。 所以?site=something&success将返回true 。

const hasQueryString = includesURLSearchString('success');
if (hasQueryString) {
  disableBack();
}

编辑

URLSearchParams接口旨在用于此目的。 您可以使用此 API 来解构查询字符串，而不是创建自己的检查字符串的函数。 使用has方法，您可以检查值是否存在。

const searchParams = new URLSearchParams(location.search);
const hasQueryString = searchParams.has('success');
if (hasQueryString) {
  disableBack();
}

如果您尝试禁用浏览器的back按钮，请尝试以下操作。 此函数将以编程方式将 URL 添加到浏览器的历史记录中。 每当用户尝试返回时， popstate触发popstate事件。 每当在 JS 中添加的状态从history删除时，就会触发此事件。 现在，每当用户返回时，它只需将当前 URL 再次添加到历史记录中。 所以用户永远无法返回。

带有此解决方案的原始帖子：

function disableBack() {
  history.pushState(null, null, location.href);
  window.addEventListener('popstate', function () {
    history.pushState(null, null, location.href);
  });
}