原生JavaScript实现动态引入外部JS和CSS文件

先来说一下背景：由于公司产品需要给多个国家和地区的用户使用，因此我们做的产品是多语言版的。之前有个模块是用easyui做的，众所周知，easyui的部分控件显示的是英文，如下图所示：
在这里插入图片描述
如果想要显示中文的话，需要引入相应的中文包。如下图所示：

<script src="Scripts/locale/easyui-lang-zh_CN.js"></script>

在这里插入图片描述
由于现在需要根据语言环境确定是否需要引入中文包，因此必须动态引入外部的js和css文件。我在这里做了一个demo，login.html可以让用户选择语言环境，index.html根据用户选择的语言环境进行显示。
login.html代码：

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta charset="utf-8" />
    <title>选择语言</title>
</head>
<body>
    <select id="language">
        <option value="中文">中文</option>
        <option value="英文">英文</option>
    </select>
    <button onclick="test()">确定</button>

    <script>
        function test() {
            var language = document.getElementById('language').value;
            window.location.href = 'index.html?language=' + language;
        }
    </script>
</body>
</html>

index.html代码：

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta charset="utf-8" />
    <title>动态引入外部文件</title>
    <script>
        var htmlNodes = [];
        window.importFiles = {
            load: function (files, succes) {
                var count = 0;
                for (var i = 0; i < files.length; i++) {
                    loadFile(files[i], function () {
                        count++;
                        if (count == files.length) {
                            succes();
                        }
                    })
                }
            }
        }

        // 加载单个文件
        function loadFile(url, success) {
            if (!fileExist(htmlNodes, url)) {
                var extension = getFileExtension(url);
                var element = null;
                if (extension == ".js") {
                    element = document.createElement('script');
                    element.src = url;
                    element.type = 'text/javascript';
                }
                else {
                    element = document.createElement('link');
                    element.href = url;
                    element.rel = "stylesheet";
                    element.type = "text/css";
                }
                success = success || function () { };
                element.onload = element.onreadystatechange = function () {
                    if (!this.readyState || this.readyState === 'loaded' || this.readyState === 'complete') {
                        success();
                        htmlNodes.push(url)
                    }
                }
                document.head.appendChild(element);
            }
            else {
                success();
            }
        }

        // 获取文件后缀名
        function getFileExtension(url) {
            return url.substr(url.lastIndexOf(".")).toLowerCase();
        }

        // 判断文件是否存在
        function fileExist(files, url) {
            for (var i = 0; i < files.length; i++) {
                if (files[i] == url) {
                    return true;
                }
            }
            return false;
        }

        // 外部文件
        var files = [
            'Content/themes/metro/easyui.css',
            'Content/themes/icon.css',
            'Scripts/jquery-1.11.3.min.js',
            'Scripts/jquery.easyui-1.4.5.min.js'
        ];

        // 判断是否添加中文包
        var language = window.location.href.split('?')[1].split('=')[1];
        if (language == '中文') {
            files.push('Scripts/locale/easyui-lang-zh_CN.js');
        }

        // 引入文件
        importFiles.load(files, function () { });
    </script>
</head>
<body>
    <div class="easyui-panel" style="width:100%;max-width:400px;padding:30px 60px;">
        <div style="margin-bottom:20px">
            <input class="easyui-datebox" style="width:100%;">
        </div>
        <div style="margin-bottom:20px">
            <input class="easyui-datebox" style="width:100%;">
        </div>
    </div>
</body>
</html>

大功告成！

HerryDong

发布了99 篇原创文章 · 获赞 16 · 访问量 3万+

私信关注

原生JavaScript实现动态引入外部JS和CSS文件

猜你喜欢