首页 > 解决方案 > Javascript更改url参数不生效

问题描述

我正在尝试使用javascript使用一些自定义参数(lang)刷新页面,以更改使用的语言。

我的后端使用查询参数 lang 知道所选择的语言,这可能是英语的“en”或法语的“fr”。

当我在浏览器中手动添加参数时,它工作得很好,但是当使用 javascript 时,我得到了正确的 url(可使用警报显示),但浏览器文本框中的 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>

标签: javascripturlinternationalization

解决方案


我找到了解决方案。

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


推荐阅读