前端国际化

来源：互联网发布：淘宝5.9.5版本下载编辑：程序博客网时间：2024/05/18 00:44

国际化通过前端来做合适么？不知道

1、国际化资源文件

//en_US_lang.jsi18n = {  btn: "i am a button",  txt: "i am a text"}//zh_CN_lang.jsi18n = {  btn: "我是按钮",  txt: "我是文本"}

2、国际化方法 i18n.js

var lang = sessionStorage.getItem("Lang");if (lang == null) {  var lan = window.navigator.userLanguage || window.navigator.language;  lan =lan.toLowerCase();  var language;  if (lan == "zh-cn") {    language = "zh_CN";  } else if (lan == "zh-tw") {    language = "zh_TW";  } else {    language = "en_US";  }  sessionStorage.setItem("Lang", language);}//多语言通用方法function GetI18N(key) {  if (i18n && i18n[key]) {    return i18n[key];  }  else {    return "$";  }}//国际化function i18nSetValue() {  var elem = document.querySelectorAll("[i18nId]");  var len = elem.length;  for (var i = 0; i < len; i++) {    var el = elem[i];    var key = el.getAttribute("i18nId");    if (el.getAttribute("type") == "button") {      el.innerHTML = GetI18N(key);    }    else{      var p = el.getAttribute("placeholder");      if (p != null) {        el.setAttribute("placeholder", GetI18N(key));      }      else {        el.innerHTML = GetI18N(key);      }    }  }  var elem2 = document.querySelectorAll("[title]");  var len2 = elem2.length;  for (var i = 0; i < len2; i++) {    var el = elem2[i];    var key = el.getAttribute("title");    el.setAttribute("title", GetI18N(key));  }}//加載多語言文件document.write('<script type="text/javascript" src="/property/' + lang + '_lang.js"></script>');

3、html 页面

<script src="/js/jquery/jquery.js"></script><script src="/js/lang/i18n.js"></script>$(function () {      i18nSetValue();      $("#i18n_zh_cn").click(function () {          sessionStorage.setItem("Lang","zh_CN");          location.reload();          return false;        })        $("#i18n_en").click(function () {          sessionStorage.setItem("Lang","en_US");          location.reload();          return false;        })    })<body> <a id="i18n_zh_cn" href="#" class="control-label">简体中文</a> <br/> <a id="i18n_en" href="#" class="control-label">英文</a> <br/> <button type="button" class = "btn btn-primary" i18nId = "btn"></button> <br/><br/> <input type="text" class="form-control" placeholder="txt" i18nId = "txt"> <br/><br/></body>

４、运行效果

前端国际化效果图

阅读全文

0 0