web-dev-qa-db-ja.com

純粋なhtml、js、jqueryを使用して複数言語のWebサイトを構築する方法

htmlを使用してページを構築しています。問題は、複数の言語スイッチを構築する方法ですか？言語翻訳は問題ではありません、私は用語を持っています。しかし、私はメニューバーの言語ボタン/ドロップダウンリストを介してすべてのページを切り替える方法がわかりませんか？既存のサンプルまたはテンプレートがあれば、さらに良いでしょう。前もって感謝します。

javascriptjqueryhtmlmultilingual
7
Laodao

oK。私の答えの編集として、以下に従ってください：

1-​​= languageというフォルダーを作成し、2つのファイルを追加します（es.jsonおよびen.json）

Jsonファイルの構造は同じである必要がありますが、以下のように翻訳が異なる必要があります。

en.json

{ 
    "date": "Date", 
    "save": "Save",
    "cancel": "Cancel" 
}

es.json

{ 
    "date": "Fecha", 
    "save": "Salvar",
    "cancel": "Cancelar" 
}

2-サンプルdivを含むhtmlページを作成し、2つのリンクを配置して、ステップ3にリストされているjs関数を指す言語を選択します。

<a href="#" onclick="setLanguage('en')">English</a> 
<a href="#" onclick="setLanguage('es')">Spanish</a>

<div id="div1"></div>

- Create 2 Java選択した言語を取得/設定するスクリプト関数：

<script>
var language; 
function getLanguage() {
(localStorage.getItem('language') == null) ? setLanguage('en') : false;
$.ajax({ 
url:  '/language/' +  localStorage.getItem('language') + '.json', 
dataType: 'json', async: false, dataType: 'json', 
success: function (lang) { language = lang } });
}

function setLanguage(lang) {
localStorage.setItem('language', lang);
}
</script>

4-可変言語を使用してテキストを入力します。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script>

    $(document).ready(function(){
    $('#div1').text(language.date);
    });

    </script>

同じ概念が複数のサイトに実装されているので、これが質問の答えになると思います。

注：JQueryのdocument.ready以外のonclickイベントを使用するだけで、（reloadを使用せずに）インスタント翻訳を作成できます。シナリオによって異なります。

23
M. Waheed

フロントエンドは初めてなので、 iframes を使用して2つの異なる言語でページをシミュレートする非常に基本的な試みの実用的なテンプレート/例を提供することを考えました。これは、少なくともM. Tahaが多言語UIを提供する汎用フロントエンドフレームワークでの作業を完了するまで、少なくとも別の方法でアイデアを得ることができます。

this と this がそれぞれ英語とフランス語のページのバージョンであると仮定すると、そのようにすることができます（fiddle here ）：

<html>
<body>
<select id="langselector" onchange="loadlang()">
  <option value="en">English</option>
  <option value="fr">French</option>
</select>
<p></p>
<iframe id="contents" src="https://jsfiddle.net/q2nw8o35/" width="1366" height="768" scrolling="yes">
  <p>Your browser does not support iframes.</p>
</iframe>
<script>
function loadlang()
  {
  var lng = document.getElementById("langselector").value;
  var cnt = document.getElementById("contents");
  switch (lng)
    {
    case "en":
      cnt.src = "https://jsfiddle.net/q2nw8o35/";
    break;
    case "fr":
      cnt.src = "https://jsfiddle.net/jmn8c9tj/";
    break;
    }
  }
</script>
</body>
</html>

ページのバージョンを作成し、src- sの値をサーバー上のページバージョンへのパスに置き換えるだけで、すべてをiframe内で実行できます。 。少し実験して（JSFiddleで遊びましょう）助けてもらえれば、そこから先に進んで、M.Tahaがしようとしているように正しい方法を探すことができます（たとえば、ローカルストレージを使用して、JSONファイルをさらに詳しく作成します/以前の設定を「記憶」するためのCookieなど）。

私の例は、最終的なフレームワークなどを提供することを意図したものではありませんが、当面、またはより良いソリューション/回答が提供されるまで、望みを達成できる非常に基本的な作業例のように見るべきです。

5
Yin Cognyto