切換網站語言JS/JSON

我建立一個網站，並在這裏基本上是我想用JavaScript實現的目標：切換網站語言JS/JSON

如果瀏覽器語言= 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未定義。我在做什麼錯？

謝謝

來源

2013-07-12 user2354357

您需要首先使用AJAX調用來檢索語言文件（或直接加載它們）。 –

代碼<h2><script>document.write(lang.h2);</script></h2>文件準備好之前執行。這就是爲什麼你的detect方法目前已被調用，而lang尚未初始化。
你以錯誤的方式

來源

2013-07-12 13:28:59 Egor4eg

那麼使用JSON.parse方法，一個念頭是JavaScript在此塊

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

的功能運行前執行。

JavaScript會在瀏覽器到達時立即執行;瀏覽器將暫停解析頁面來執行此操作。但是，您的檢測功能看起來像是在等待文檔就緒事件運行。

因此，document.write（）調用發生在調用detect（）方法之前，並且lang沒有值。

來源

2013-07-12 13:31:54 Steve

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。

來源

2013-07-12 13:37:56 Katana314

切換網站語言JS/JSON

回答

相關問題