首页 ›  文章

简单版前端页面国际化

2019-12-04
<input id="articleId" value="1190000021194930" class="hidden">

需求目标

html页面中实现国际化

思路

1.确定需要改变内容的dom节点
2.定义国际化json文件
3.通过innerText赋值改变节点内容

部分html

<body>
    <div i18n="a">姓名</div>
    <div>
        <span i18n="b">班级</span>
    </div>
    <div i18n="c">成绩</div>

    <select name="" id="select">
        <option value="en">en</option>
        <option value="cn">cn</option>
    </select>
</body>

实现方法

1.先给dom中需要动态切换的文本设置自定义属性i18n="属性值"(这里的属性值对应json文件中的键值)
2.获取json文件(这里采用的是原生ajax的方式获取)
  var i18n = 'cn';
  var lang = {};
  var xhr = new XMLHttpRequest();
  xhr.onreadystatechange = function() {
        if (xhr.readyState === 4 && xhr.status == 200) {
            let response = xhr.responseText;
            lang = JSON.parse(response);
            //遍历获取dom设置值
            getI18nDom(document.body);
        }
    };
    xhr.open('get', './index.json');
    xhr.send();
3.遍历dom找出需要设置国际化的dom节点,设置值
function getI18n(key) {
        return lang[i18n][key] || '';
    }
function getI18nDom(el) {
        if (el.childElementCount == 0) {
            if (el.getAttribute('i18n')) {
                el.innerText = getI18n(el.getAttribute('i18n'));
            }
        } else {
            [].forEach.call(el.children, (item) => {
                getI18nDom(item);
            });
        }
    }
4.通过监听select的change事件改变
 document.getElementById('select').onchange = function(val) {
        i18n = val.target.value;
        getI18nDom(body);
    };

JSON文件

{
"en": { "a": "name", "b": "class", "c": "score", "en": "English", "cn": "Chinese" },
"cn": { "a": "姓名", "b": "班级", "c": "成绩", "en": "英语", "cn": "中文" }
}
[![](https://img.javascriptcn.com/e92d46e177fd4dceb015aef980a06b7d) ](/u/maomin)

<button type="button" class="btn btn-primary follow-user sf_do" data-dotype="post" data-content="{"type":"state","state":false,"true":"\u5173\u6ce8\u4f5c\u8005","false":"\u6b63\u5728\u5173\u6ce8"}" data-api="/iteration/api/user/1030000021064328/follow">关注作者</button>

推荐阅读
![Planets](https://img.javascriptcn.com/55fa04769b85831b56a5917c68852651.png) <map name="gridsMap" id="gridsMap"></map>
原文链接:segmentfault.com

上一篇:前端常用简单的一堆小东西整理
下一篇:常见轮播图实现效果
相关文章

首次访问,人机识别验证

扫描下方二维码回复 1024 获取验证码,验证完毕后 永久 无须验证

操作步骤:[打开微信]->[扫描上侧二维码]->[关注 FedJavaScript 的微信] 输入 1024 获取验证码

验证码有误,请重新输入