前端国际化

最新推荐文章于 2024-01-22 11:00:32 发布

遗忘了的自己

最新推荐文章于 2024-01-22 11:00:32 发布

阅读量457

点赞数

分类专栏： html css js 文章标签：国际化前端

本文链接：https://blog.csdn.net/qq_24078843/article/details/76268301

版权

html css js 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

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

1、国际化资源文件

//en_US_lang.js
i18n = {
  btn: "i am a button",
  txt: "i am a text"
}

//zh_CN_lang.js
i18n = {
  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

收藏

觉得还不错? 一键收藏
0
评论
前端国际化

国际化通过前端来做合适么？不知道1、国际化资源文件//en_US_lang.jsi18n = { btn: "i am a button", txt: "i am a text"}//zh_CN_lang.jsi18n = { btn: "我是按钮", txt: "我是文本"}2、国际化方法 i18n.jsvar lang = sessionStorage.getItem(
复制链接

扫一扫