Question

我在使用JavaScript脚本时遇到了一个小问题。我正在尝试使我的网站使用多种语言。全部设置在数据库中，我的选择适用于URL没有变量的页面。这是我的脚本：

<script type="text/javascript">
    function submitForm() {
        var thelang = document.getElementById('lang').options[document.getElementById('lang').selectedIndex].value;
        window.location.href = window.location.pathname + '?lang=' + thelang;
    }
</script>

在首页的情况下，它可以工作，并且将http://localhost/更改为http://localhost/?lang=en

但是当我有一个已经设置了变量的URL时，它将替换它。来自http://localhost/modules/product/product.php?id=1的我有http://localhost/modules/product/product.php?lang=en，我想要的结果是：

http://localhost/modules/product/product.php?id=1&lang=en

如何修复脚本以使其在两种情况下均能正常工作，或者添加变量或将其与现有变量粘合在一起？

Answer 1

尝试检查URL中是否已经存在查询字符串参数。

function submitForm() {
  var thelang = document.getElementById('lang').options[document.getElementById('lang').selectedIndex].value;

  if (window.location.href.indexOf('?') >= 0) {
    // There are already querystring params in the URL. Append my new param.
    window.location.href = window.location.href + '&lang=' + thelang;
  } else {
    // There are not querystring params in the URL. Create my new param.
    window.location.href = window.location.href + '?lang=' + thelang;
  }
}

更新：帐户随后发生的语言更改

这假定lang值将始终为两个字符。

function submitForm() {
  var thelang = document.getElementById('lang').options[document.getElementById('lang').selectedIndex].value;
  var newUrl = window.location.href;
  var langIndex = newUrl.indexOf('lang=');

  if (langIndex >= 0) {
    // Lang is already in the querystring params. Remove it.
    newUrl = newUrl.substr(0, langIndex) + newUrl.substring(langIndex + 8); // 8 is length of lang key/value pair + 1.
  }

  // Remove the final '?' or '&' character if there are no params remaining.
  newUrl = newUrl.endsWith('?') || newUrl.endsWith('&') ? newUrl.substr(0, newUrl.length - 1) : newUrl;

  newUrl = newUrl.indexOf('?') >= 0
    ? newUrl + '&lang=' + thelang  // There are already querystring params in the URL. Append my new param.
    : newUrl + '?lang=' + thelang; // There are not querystring params in the URL. Create my new param.

  window.location.href  = newUrl;
}

Answer 2

如果我对您的理解正确，那么您想在末尾添加?lang=en。除非那里已经有id=1（或类似的东西）。因此，您可以仅添加一个if语句，以查看是否在末尾写入了.php。这不是一个非常漂亮的解决方案，但您确实想将字符串添加在一起，所以没关系

Answer 3

您可以使用window.location的“搜索”元素。有关兼容性，请参见here。然后，您可以将结果与所需的参数合并。但是，您可以使用更复杂（更安全）的方法，并使用for + URLSearchParams检查是否已有该ID的参数。

const params = new URLSearchParams(window.location.search);

const paramsObj = Array.from(params.keys()).reduce(
    (acc, val) => ({ ...acc, [val]: params.get(val) }), {}
);

Answer 4

这应该解决它：

var currentUrl = window.location.origin + window.location.pathname;
var newUrl = currentUrl + (currentUrl.includes('?') ? ('&lang=' + thelang) : ('?lang=' + thelang));
window.location.href = newUrl;

在网址中添加变量，而不是替换一个

4 个答案: