所了解到的常规多语言方式,要么是将需要翻译的文本标签加自定义属性,要么就是需要替换原文本为自定义格式,以此来方便遍历替换。但这样事实上使现在的维护量变大。
以下我找资料搜到一段代码,已经比较接近需求了,但在ie6-8下报错(SCRIPT438: 对象不支持此属性或方法 ),而在ff和chrome下完全正常,请高手帮忙解决一下哈!
<!doctype html>
<html>
<head>
<title>Localization</title>
<meta charset="utf-8" />
<style type="text/css">
label { width:150px; display:inline-block;}
</style>
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<script type="text/javascript">
(function(lazylocalization) {
lazylocalization.dictionary = {};
lazylocalization.selectors = '';
lazylocalization.init = function(params) {
lazylocalization.dictionary = params.dictionary;
lazylocalization.selectors = params.selectors;
$(lazylocalization.selectors).each(function(i, element) {
if (element.firstChild && element.firstChild.nodeType === 3) {
element.firstChild.default_lang = element.firstChild.data;
}
});
lazylocalization.localize(params.lang);
};
lazylocalization.localize = function(lang) {
var language_code = $.inArray(lang, lazylocalization.dictionary.Languages);
if (language_code < 0) {
alert(lang + ' is not a valid language');
return;
}
$(lazylocalization.selectors).each(function(i, element) {
if (element.firstChild && element.firstChild.nodeType === 3) {
element.firstChild.data = lazylocalization.localized(element.firstChild.default_lang, language_code);
}
});
};
lazylocalization.localized = function(text, language_code) {
var key = text.split(' ').join('_'),
l = '';
if (lazylocalization.dictionary[key]) {
l = lazylocalization.dictionary[key][language_code];
} else {
l = text;
}
return l;
};
}(window.lazyLocalize = window.lazyLocalize || {}, jQuery));
$(document).ready(function () {
var dictionary = {
Languages:[
'en',
'zh-TW',
'zh-CN'
],
姓名:[
'Name',
'姓名',
'姓名'
],
Date_of_birth:[
'Date of birth',
'生日',
'生日'
],
Address:[
'Address',
'地址',
'地址'
],
Phone:[
'Phone',
'電話',
'电话'
],
Profile:[
'Profile',
'檔案',
'档案'
],
Resume:[
'Resume',
'履歷',
'简历'
],
Contact:[
'Contact',
'聯繫方式',
'联系方式'
],
邮箱:[
'Email',
'郵箱',
'邮箱'
],
Website:[
'Website',
'網站',
'网站'
],
a16_Aug_1982:[
'16 Aug 1982',
'1982年8月16號',
'1982年8月16日'
]
};
var selectors = 'label,a,h2,span';
lazyLocalize.init({
lang: navigator.language || navigator.userLanguage,
dictionary: dictionary,
selectors: selectors
});
});
</script>
</head>
<body>
<a href="javascript:lazyLocalize.localize('en')">EN</a>
<a href="javascript:lazyLocalize.localize('zh-CN')">简体中文</a>
<a href="javascript:lazyLocalize.localize('zh-TW')">繁體中文</a>
<h2>Contact</h2>
<ul>
<li><label>姓名</label><span>lionio</span></li>
<li><label>Date of birth</label><span>a16 Aug 1982</span></li>
<li><label>Address</label><span>via c.so del popolo vico III, 3 86019 Vinchiaturo (CB) Italy</span></li>
<li><label>邮箱</label><span>lionio@csdn.net</span></li>
<li><label>Phone</label><span>+86.12345666</span></li>
<li><label>Website</label><span>www.csdn.net</span></li>
</ul>
<ul>
<li><a href="#">Profile</a></li>
<li><a href="#">Resume</a></li>
<li><a href="#">Contact</a></li>
</ul>
</body>
</html>
另外腾讯微博(http://t.qq.com/)也是采取这样类似的词典字符串替换的多语言方法(页面底部有语言切换),要是能利用它的代码也很好啊。
4 个解决方案
#1
放弃 IE6 !反正微软连 XP 都不再维护了
#2
不光是IE6的,是IE6、7、8都有问题。
#3
那就求助 jq
反正超出你能你范围的事情,首先是借助框架
反正超出你能你范围的事情,首先是借助框架
#4
是不是代码哪儿不规范造成的?
我看错误是在:
element.firstChild.default_lang = element.firstChild.data;
这一行产生的。说是:SCRIPT438: 对象不支持此属性或方法
但应该怎么修改呢?哪位高手能帮忙解决一下嘛?
我看错误是在:
element.firstChild.default_lang = element.firstChild.data;
这一行产生的。说是:SCRIPT438: 对象不支持此属性或方法
但应该怎么修改呢?哪位高手能帮忙解决一下嘛?
#1
放弃 IE6 !反正微软连 XP 都不再维护了
#2
不光是IE6的,是IE6、7、8都有问题。
#3
那就求助 jq
反正超出你能你范围的事情,首先是借助框架
反正超出你能你范围的事情,首先是借助框架
#4
是不是代码哪儿不规范造成的?
我看错误是在:
element.firstChild.default_lang = element.firstChild.data;
这一行产生的。说是:SCRIPT438: 对象不支持此属性或方法
但应该怎么修改呢?哪位高手能帮忙解决一下嘛?
我看错误是在:
element.firstChild.default_lang = element.firstChild.data;
这一行产生的。说是:SCRIPT438: 对象不支持此属性或方法
但应该怎么修改呢?哪位高手能帮忙解决一下嘛?