javascript - 如果存在查询字符串，则关闭 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接口(interface)旨在用于此目的。您可以使用此 API 来解构查询字符串，而不是创建自己的检查字符串的函数。随着has方法您可以检查值是否存在。

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

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

Original post with this solution:

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