替换JS语言文件会加载旧值

时间:2014-10-13 07:48:52

标签: javascript

我在我的应用程序中实现了一个简单的本地化切换。我通过从组合(或其他)中选择laguage然后将JS语言文件与另一个文件切换来实现。

function setLang(lang) {
    setCookie('vegindex_lang', lang, 365);

    // Find language 'script' element and replace according to lang
    var elements = document.getElementsByTagName('script');
    for (var i = 0; i < elements.length; i++) {
        if (elements[i].id && elements[i].id == 'lang') {
            var src = 'JavaScript/Localisation/strings_' + lang + '.js';
            document.head.replaceChild(newElement(src), elements[i]);
            loadStrings();
            break;
        }
    }
}

function newElement(src) {
    var s = document.createElement("script");
    s.type = "text/javascript";
    s.src = src;
    s.id = 'lang';

    return s;
}

function loadStrings() {
    // Wizard wrapper window
    wizardWrapper.setTitle(wizard_title);

    // Wizard panel
    wizardButtonDisclaimer.setText(wizard_button_disclaimer);
    wizardButtonBack.setText(wizard_button_back);
    wizardButtonNext.setText(wizard_button_next);

    // Reload wizard
    wizardWrapper.doLayout();
}

语言文件的典型内容:

var wizard_title = 'This is english';
var wizard_button_disclaimer = 'Disclaimer';
var wizard_button_back = 'Back';
var wizard_button_next = 'Next';

它工作正常,但总是加载prewouse语言。那意味着:

  • 第一次语言切换 - 没有任何反应
  • 第二次语言切换 - 语言切换到我第一次选择的语言

看起来新注入的脚本文件在添加之后无法正常使用。任何人都知道为什么会这样?

2 个答案:

答案 0 :(得分:1)

这可能是因为你注入了script-tag,并在调用loadStrings()之后立即注入。语言文件可能仍在(向下)加载。

这称为竞赛条件。发生这种情况取决于您的互联网速度和其他几个依赖项,您应该始终尽量避免这种情况。

您可以通过使用像labJS(http://labjs.com/),RequireJS(http://requirejs.org/)或任何其他的脚本加载器来避免这种情况。 这将允许您加载脚本并等待它,然后当它成功加载时,执行loadStrings() - 方法。

答案 1 :(得分:0)

只想发布更正后的setLang函数,其中包含RequireJS的实现:

function setLang(lang) {
    setCookie('vegindex_lang', lang, 365);

    // Find language 'script' element and replace according to lang
    var elements = document.getElementsByTagName('script');
    if (lang != langfile) {
        for (var i = 0; i < elements.length; i++) {
            if (elements[i].id && elements[i].id == 'lang') {
                var src = 'JavaScript/Localisation/strings_' + lang + '.js';
                document.head.replaceChild(newElement(src), elements[i]);
                // 'require' vil fire loadStrings() as soon as 'src' file loads
                require([src], function () {
                    loadStrings();
                });
                break;
            }
        }
    }
}