先来说一下背景:由于公司产品需要给多个国家和地区的用户使用,因此我们做的产品是多语言版的。之前有个模块是用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>
大功告成!