Question

我正尝试使用javascript刷新带有一些自定义参数（语言）的页面，以更改使用的语言。

我的后端了解有关使用查询参数lang的选择语言的信息，对于英语，可能是“ en”，对于法语是“ fr”。

当我在浏览器中手动添加参数时，它可以正常工作，但是使用javascript时，我获得了正确的URL（可使用Alert显示），但浏览器文本框中的URL保持不变。

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<body>
<ul th:fragment="languages-chooser" class="navbar-nav ml-auto">
    <style>
        .flag-icon {
            font-size: 20px !important;
        }
    </style>

    <li class="badge badge-light nav-item mr-3">
        <a href="" onclick="change_language('en')">
            <span class="flag-icon flag-icon-us"></span>
        </a>
    </li>

    <li class="badge badge-light nav-item mr-3">
        <a href="" onclick="change_language('fr')">
            <span class="flag-icon flag-icon-fr"></span>
        </a>
    </li>

    <script>
        function change_language(lang) {
            localStorage.lang = lang;

            alert("new url: " + updateUrlParam("lang", lang));

            window.location.href = updateUrlParam("lang", lang);
        }

        function updateUrlParam(key, value, url) {
            if (!url)
                url = window.location.href;

            var re = new RegExp("([?&])" + key + "=.*?(&|#|$)(.*)", "gi"),
                hash;

            if (re.test(url)) {
                if (typeof value !== 'undefined' && value !== null) {
                    return url.replace(re, '$1' + key + "=" + value + '$2$3');
                }
                else {
                    hash = url.split('#');
                    url = hash[0].replace(re, '$1$3').replace(/(&|\?)$/, '');
                    if (typeof hash[1] !== 'undefined' && hash[1] !== null) {
                        url += '#' + hash[1];
                    }
                    return url;
                }
            }
            else {
                if (typeof value !== 'undefined' && value !== null) {
                    var separator = url.indexOf('?') !== -1 ? '&' : '?';
                    hash = url.split('#');
                    url = hash[0] + separator + key + '=' + value;
                    if (typeof hash[1] !== 'undefined' && hash[1] !== null) {
                        url += '#' + hash[1];
                    }
                    return url;
                }
                else {
                    return url;
                }
            }
        }
    </script>
</ul>

</body>
</html>

Answer 1

我找到了解决方法。

i使用的<a href="" />显然指向没有任何参数的索引页，将其更改为<a href="#" />

Javascript更改url参数无效

1 个答案: