由于网站建设需要,最近在研究完全前台的国际化方案,我希望做到与后台语言和数据库无关,即使网站全部采用html也能做到国际化。但google后却没有找到合适的方案,于是我汇总了大家的思路总结出我自己解决方案,全当抛砖引玉。
原理:我的想法就是,先把各国语言翻译好通过外部js文件保存到数组里面,再根据浏览器语言环境来引用不同的js文件,然后用js函数来替换原来html中需要翻译的部分。这里我把所有需要翻译的文字使用span标签,在网页快读完时对照js文件一个个翻译过去。以下是示例文件(index.html是主文件,default.js用来保存你的js代码,zh-cn.js和en-us.js保存翻译的文字)。(点击下载)
实际案例:
如果你不想下载代码试验,可以直接访问http://01478.com看结果,以下是测试方法。
测试方法:
IE浏览器是通过window.navigator.systemLanguage来判断语言,字面意思是判断操作系统的语言,但我只有中文xp无法测试英文环境中是否正常。
其他的浏览器通过window.navigator.language来判断,好像判断的是浏览器的语言版本,因为firefox修改首选语言没有效果,中文的firefox怎么改都是显示中文,但我用英文的firefox测试可以正常显示英文。
opera可以通过修改"tools->preference->language"来实现语言切换。
ps:谁有苹果电脑的话,告诉我(CCBOY109@GMAIL.COM) Safari下是否有效?
目前问题:
1 定义到lang数组中的字符串在html直接使用都是显示未定义,而在外部js文件中调用能正常使用。不知道为什么?
2 opera的js动态引用不同于ie和ff,以至于不得不写一段语句专门引用。
3 只在ie,ff,opera测试过,mac上还没测试。
缺点:1 由于使用js动态国际化,搜索引擎爬虫只能采集到html文件中的字符串,如果你用英文作为html母语的话,搜索引擎采集到的片段就只能是英文。对于SEO来说是大忌,但这是不可避免的。
2 为了方便操作把字符串全部保存在js文件中,好像这么做不符合web标准哦,按标准应该是从xml文件读去翻译的字符串,呵呵,我不会做。
3 如果用户禁用js那就麻烦了:(
优点:
1 不占用服务器资源,几乎都是静态处理,最大化网页读取速度。
2 无论你后台使用asp,php,jsp,还是py,perl,ror……都可以用这个方法国际化你的网站。
拓展应用:1 只要补充不同语言的js文件就可以无限拓展你的网页语言版本,比如zh-cn:简体中文 zh-hk:繁体中文(香港)zh-tw:繁体中文(台湾)fr-fr:法文 en-uk:英文 en-us:英文(美国)ja-jp:日文……
2 可以应用到css文件上,根据不同的语言做布局上的调整,比如英文页面引用en-us.css这个文件行间距小点,中文页面引用zh-cn.css这个文件,行间距大点。个人觉得这个意义最大,国际化可以精确到用户体验了。
3 由于采用js文件,所以应用方法很灵活,比如你可以想我在http://01478.com那样,中文页面用百度搜藏,qq书签……作网络书签收藏按键,英文页面用del.icio.us,digg……作网络书签收藏按键。
