转自:http://rainlife.iteye.com/blog/161713
不知道大家对于javascript中的消息资源是如何做国际化的,对于页面文件来说,可以使用一些国际化的开源东东,像struts的〈bean:message〉,或者使用JSTL的fmt,但在js文件中,却无法使用这类的东西,一种变通的办法,就是在jsp中定义一些javascript的常量,这些常量的值为国际化资源文件中定义的信息,然后在js代码中去使用定义好的这些常量。
另一个方法,像FCKEditor这样,直接使用javascript来实现javascript的国际化。而这样的实现方法,也并不困难。
javascrip中的一个navigator的内置对象,包含了正在使用的 Navigator 的版本信息。
属性概览
appCodeName |
指定浏览器的代码名称。 |
appName |
指定浏览器的名称。 |
appVersion |
指定 Navigator 的版本信息。 |
language |
标明正在使用的 Navigator 的翻译语种。 |
mimeTypes |
客户端支持的所有 MIME 类型数组。 |
platform |
标明了 Navigator 编译适合的机器类型。 |
plugins |
客户端已安装的所有插件数组。 |
userAgent |
指定了用户代理头。 |
这里的appName应该都比较熟悉,可以用它来判断不同的浏览器,像ie ,firefox等。
navigator还有一个language的属性,
IE代码:
navigator.userLanguage
非IE代码:
navigator.language
它的返回值为用户所在的语言环境,与java中的Locale类似,比如说我在中文环境下,则返回"zh-CN"。
这样,就可以根据返回的language的不同,来定位到不同的message_XXX.js资源文件中。
比如说定义两个js资源文件:
message_en.js
var Lang = {
hello : "Hello World!"
}
message_zh-CN.js
var Lang = {
hello : "你好,世界!"
}
我们就可以在js代码中直接使用Lang[key](这里的key为hello)实现资源信息的国际化。
另外,像FCKEditor,在HTML页面中,也使用javascript来做国际化,像下面的代码:
<span fckLang="PlaceholderDlgName">Placeholder Name</span><br>
通过为span这个标签增加一个fckLang="XXX"的属性,这里的"XXX",就是定义在资源js文件中的(像上面的"hello")。
这是如何实现的呢?
先定义一个TranslatePage(A)的方法,参数A为一个DOM对象:
function TranslatePage(A) {
this.TranslateElements(A, 'SPAN', 'innerHTML', false);
}
在TranslatePage方法内部,又调用了TranslateElements的方法:
/**
* @param A DOM对象
* @param B 国际化的HTML标签
* @param C 国际化标签的innerHTML或innerText
* @param D 是否转换HTML的标签
*/
var TranslateElements = function(A, B, C, D) {
var e = A.getElementsByTagName(B);//实际上就是根据标签名取到这个标签的数据集合
var E,s;
for (var i = 0; i < e.length; i++) {
if (E = e[i].getAttribute('fckLang')) { //如果这个标签中有'fckLang'的属性的,说明它是要实现国际化的
if (s = Lang[E]) {
if (D) s = HTMLEncode(s);//是否处理HTML标签
eval('e[i].' + C + ' = s');//这个实际上就是执行XXX.innerHTML='XXXX'
}
}
}
}
下面这个是HTMLEncode方法的实现:
var HTMLEncode = function(A) {
if (!A) return '';
A = A.replace(/&/g, '&');
A = A.replace(/</g, '<');
A = A.replace(/>/g, '>');
return A;
}
实际上就是将"〈"和“〉”这样的标签转换一下。
这样的实现,不禁让我想到了Tapestry,通过在HTML标签中增加一个“jwcid”的属性,这标识这个HTML标签是一个Tapestry的组件,通过Tapestry的处理,再将结果返回重新渲染由jwcid这个属性标识的HTML标签。
分享到:
相关推荐
该Demo源码是博文《基于jQuery.i18n.properties 实现前端页面的资源国际化》里面的源码Demo。博文地址:http://blog.csdn.net/aixiaoyang168/article/details/49336709。 可供下载学习使用。
i18next是浏览器或任何其他JavaScript环境(例如node.js)的非常流行的国际化框架
Google的通用Java,C ++和JavaScript库,用于解析,格式化和验证国际电话号码。 Java版本针对在智能手机上运行进行了优化,并且从4.0开始就被Android框架使用(冰淇淋三明治)。 快速链接 正在报告问题? 要发送...
当我们在做前台页面开发时,由于页面内容过多,过于繁杂,有的时候一个页面上千行的(当然这样的页面也就算一般...与 Java 里的资源文件类似,jQuery.i18n.properties 采用 .properties 文件对 JavaScript 进行国际化。
完整的JavaScript开发工具包充分利用流行的开源技术基于SPA的全生命周期模板内置辅助功能支持支持国际化(28种语言和160多个区域)丰富的UI组件具有共同模型层的高级双向结合支持单页应用程序导航的强大路由系统智能...
bpmn-js翻译该存储库收集用户界面元素,消息和工具提示的社区维护的翻译。可用翻译使用翻译遵循并用此存储库中的一种语言文件替换。贡献创建一个并提供翻译。 检出以获取可用消息的列表。执照麻省理工学院
用于前端文本国际化,支持同时引入多个语言资源文件,更友好的支持中文环境,在中文环境下无需引入资源文件 使用方法 文件引入 该插件依赖于jquery 和 js-cookie,可修改源代码取消对后者的依赖 [removed][removed] ...
在介绍 jQuery.i18n.properties 之前,我们先来看一下什么是国际化。国际化英文单词为:...与 Java 里的资源文件类似,jQuery.i18n.properties 采用.properties 文件对 JavaScript 进行国际化。jQuery.i18n.pr
在介绍jQuery.i18n.properties之前,我们先来看一下什么是国际化。...与Java里的资源文件类似,jQuery.i18n.properties采用.properties文件对JavaScript进行国际化。jQuery.i18n.properties插件根据用
这些演示文件是在3/11星期三于2015年Esri国际开发者峰会上介绍的Modular JavaScript会话的资源。 演示版 可以在这里访问该演示: : 滑梯 可通过Dropbox在以下位置获得幻灯片: : 执照 该软件是根据MIT许可提供的。...
ASP.NET的智能国际化 PM> Install-Package i18N 介绍 i18n库旨在取代.NET资源的使用,而采用了一种更简单的,全球认可的用于本地化基于ASP.NET的Web应用程序的标准。 支持平台 i18n本身以.NET Framework 4为目标,...
您也可以通过此获取更多资源。 AngularJS-Angular的官方网站是一个很好的起点。 您还可以使用Thinkster流行指南和Egghead视频。 Node.js-首先浏览Node.js官方网站和此StackOverflow Thread ,它应该使您立即使用...
jquery.i18n.json 轻量级 jQuery 插件,可使用 json 文件轻松国际化您的 Web 应用程序。
帮助想要使用vue-ueditor-wrap的伙伴们更便捷的获取到这个资源运行项目
- [x] 国际化 - [ ] 权限管理 - [ ] 站内消息推送 ### 安装步骤 ``` // 把模板下载到本地 git clone https://github.com/PY-GZKY/fastapi-crawl-admin.git // 进入模板目录 cd crawlfont // 安装项目...
Cell 插件用于开发B/S结构程序,使用Asp, Asp.net, Jsp, VbScript, JavaScript等语言开发,可以在浏览器中直接打印报表(非IE打印),带有国际化数字签名,让用户使用更方便,更安全。 • 具备Cell组件的所有...
3.2.1 声明和实例化..............................................59 3.2.2 对象引用..............................................59 3.2.3 对象废除..............................................59 3.2.4 ...
- [x] 国际化 // 进入模板目录 cd crawlfont // 安装项目依赖,等待安装完成之后,安装失败可用 cnpm 或 yarn npm install // 开启服务器,浏览器访问 http://localhost:8080 npm run dev // 执行构建命令,...
模板和JS里面直接使用中文,后期国际化再根据资源文件替换生成不同的语言文件 sample code gulp.task('i18n', function() { var dict = { cn: require('i18n/cn.json'), en: require('i18n/en.json'), tw: ...