请教字符串替换方式页面多语言的js实现方法

时间:2021-12-03 15:56:38
原页面为普通中文动态页,想通过简便的加载js来实现多语言切换。类似那个繁简互转的js(字换字),利用js中词典达到客户端的词(句)和词(句)的字符串替换显示。
所了解到的常规多语言方式,要么是将需要翻译的文本标签加自定义属性,要么就是需要替换原文本为自定义格式,以此来方便遍历替换。但这样事实上使现在的维护量变大。

以下我找资料搜到一段代码,已经比较接近需求了,但在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


引用 1 楼 xuzuning 的回复:
放弃 IE6 !反正微软连 XP 都不再维护了

不光是IE6的,是IE6、7、8都有问题。

#3


那就求助 jq
反正超出你能你范围的事情,首先是借助框架

#4


是不是代码哪儿不规范造成的?
我看错误是在:
element.firstChild.default_lang = element.firstChild.data;
这一行产生的。说是:SCRIPT438: 对象不支持此属性或方法 
但应该怎么修改呢?哪位高手能帮忙解决一下嘛?

#1


放弃 IE6 !反正微软连 XP 都不再维护了

#2


引用 1 楼 xuzuning 的回复:
放弃 IE6 !反正微软连 XP 都不再维护了

不光是IE6的,是IE6、7、8都有问题。

#3


那就求助 jq
反正超出你能你范围的事情,首先是借助框架

#4


是不是代码哪儿不规范造成的?
我看错误是在:
element.firstChild.default_lang = element.firstChild.data;
这一行产生的。说是:SCRIPT438: 对象不支持此属性或方法 
但应该怎么修改呢?哪位高手能帮忙解决一下嘛?