切换网站语言JS/JON

Question

我正在构建一个网站，以下基本上是我想要使用JavaScript:实现的目标

如果浏览器language=fr，则从languageFr.json获取文本else从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

1. 代码<h2><script>document.write(lang.h2);</script></h2>在文档准备好之前执行。这就是为什么现在已经调用了detect方法，而lang还没有初始化
2. 您错误地使用了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。