Question

我正在建立一个网站，这基本上是我想用JavaScript实现的目标：

如果浏览器语言= fr，则从languageFr.json获取文本否则从languageEn.json

获取文本

以下是我的代码现在的样子：

我的JSON

{
"h2": "random title",
    "p": lorem ipsum
}

我的JavaScript，在index.html的头部

<script text="text/javascript">
    var lang;

    function detect() {
        var userLang = navigator.language || navigator.userLanguage;
        if (userLang == "fr") {
             lang = JSON.parse("languageFr.json");
        } else {
                 lang = JSON.parse("languageEn.json");
        }       
    }

    $(document).ready(detect());
</script>

然后在我的HTML主体中：

<h2><script>document.write(lang.h2);</script></h2>

然而，这似乎不起作用。 Chrome的控制台告诉我lang未定义。我做错了什么？

谢谢

Answer 1

代码<h2><script>document.write(lang.h2);</script></h2>在文档准备好之前执行。这就是为什么您的detect方法目前已调用机器人且lang尚未初始化的原因。
您以错误的方式使用JSON.parse方法

Answer 2

嗯，有人想到这个块中的Javascript

<h2><script>document.write(lang.h2);</script></h2>

在函数运行之前执行。

一旦浏览器到达，Javascript就会执行;浏览器将暂停解析页面以执行此操作。但是，您的检测功能看起来正在等待文档就绪事件运行。

因此，document.write（）调用在调用detect（）方法之前发生，而lang没有值。

Answer 3

Egor4eg对这个问题是正确的（实际上大多数答案都是）。我建议你使用不同的方法来填充任何应该具有特定语言文本的元素。这是一种可能性。

<div class="i18nstring" data-message="h2"></div>

//Put this at the bottom of your detect() function (so it's only called after $ ready)

$('.i18nstring').forEach(function() {
    $(this).text( lang[this.dataset.message] );
}

这可能需要更多的工作（主要是在数据消息方面）才能完全跨浏览器兼容，但JQuery可以帮助解决这个问题。请注意，每个i18nstring节点不必是div。

切换网站语言JS / JSON

3 个答案: