动态加载js文件

只有一个途径

已于 2023-03-29 16:24:53 修改

阅读量675

点赞数

文章标签： javascript 开发语言 ecmascript

于 2021-10-27 17:24:41 首次发布

本文链接：https://blog.csdn.net/weixin_49416704/article/details/120996854

版权

本文介绍了一种在管理系统中动态加载不同语言版本的bootstrapTable提示语的方法。首先在公共HTML中引入默认的bootstrap文件，然后通过AJAX向后台请求当前语言环境，根据返回的语言类型动态加载对应的JS文件，如bootstrap-table-zh-CN.min.js、bootstrap-table-ko-KR.min.js等，从而实现多语言切换功能。

摘要由CSDN通过智能技术生成

1、使用场景

例如本人当前需求——给当前的管理系统的bootstarpTable的提示语修改各个国家的语言（语言提示根据当前管理系统的语言环境）。

也就是根据如图所示的语言，来变换bootstarptable的提示语，

类似这种提示语。

看看是怎么做的吧！！

1、首先我在一个公共的html中引入一个默认的bootstarp文件，这样子系统会默认加载这个文件。

<script src="../static/js/bootstrap-table.min.js"
           th:src="@{{serviceName}/js/bootstrap-table.min.js?v={version}(serviceName=${application.serviceName},version=${application.version})}"></script>

2、我在common.html中继续加入了一个动态加载js的代码，我是首先通过ajax向后台同步请求当前语言是什么，看代码

<script type="text/javascript">
        // 动态加载js文件--my.js
        window.onload = function () {
            var src;
            $.ajax({
                type: "post",
                sync: false,
                url: "/sso/changeLangCurrent",
                dataType: "json",
                success: function (b) {
                    if (b.info == '0'||b.info == 'zh_CN'||b.info == null) {
                        src = '/js/bootstrap-table-zh-CN.min.js';
                        loadJs(src)
                    } else if (b.info == 'ko_KR'){
                        src = '/js/bootstrap-table-ko-KR.min.js';
                        loadJs(src)
                    }else if (b.info == 'zh_TW'){
                        src = '/js/bootstrap-table-zh-TW.min.js';
                        loadJs(src)
                    }else if (b.info == 'en_EN'){
                      /*  src = '/js/bootstrap-table-en-EN.min.js';
                        loadJs(src)*/
                    }else if (b.info == 'vt_VT'){
                        src = '/js/bootstrap-table-vt-VT.min.js';
                        loadJs(src)
                    }else if (b.info == 'th_TH'){
                        src = '/js/bootstrap-table-th-TH.min.js';
                        loadJs(src)
                    }
                },
                error: function () {
                    src = '/js/bootstrap-table-zh-CN.min.js';
                    loadJs(src)
                }
            })
        }
    </script>
    <script type="text/javascript">
        function loadJs(src) {
            //得到html的头部dom
            var theHead = document.getElementsByTagName('head').item(0);
            //创建脚本的dom对象实例
            var myScript = document.createElement('script');
            myScript.src =src;           //指定脚本路径
            myScript.type = 'text/javascript';  //指定脚本类型
            myScript.defer = true;              //程序下载完后再解析和执行
            theHead.appendChild(myScript);      //把dom挂载到头部
        }
    </script>

 @RequestMapping(value = "changeLangCurrent", method = {RequestMethod.POST})
  @ResponseBody
  public BaseResult changeLangCurrent(HttpServletRequest request) throws Exception {
    BaseResult baseResult = new BaseResult();
    AccessToken accessToken = SessionUtils.getAccessToken(request);
    RMap<String, String> map = redissonClient.getMap(BOSSRedisContants.CURRENT_LANGUAGE);
    if (CollectionUtils.isEmpty(map)){
      baseResult.ok();
      baseResult.setInfo("0");
    }else {
      baseResult.ok();
      baseResult.setInfo(map.get(accessToken.getUserId()));
    }
    return baseResult;
  }

后台查询radis中当前语言，返回给前端，动态加载js文件。