如何使用纯HTML，JS，jQuery构建多语言网站

我正在使用html构建页面。问题是如何构建多语言切换？语言翻译不是问题，我有术语。但是，我不知道如何通过菜单栏上的"语言"按钮/下拉列表切换每个页面？如果有现有的示例或模板，那会更好。预先感谢。

好。作为对我的答案的编辑，请关注：

1- 创建一个称为语言的文件夹，然后向其添加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>

3 - 创建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以外的其他事件即可进行即时翻译（无需重新加载）。这取决于您的情况。

由于您是前端的新手，所以我想为您提供一个非常基本的尝试使用IFRAMES以2种不同语言模拟页面的工作模板/示例。这至少会给您一个关于如何做到这一点的替代方法的想法，至少直到塔哈（M. Taha）在提供多语言UI的通用前端框架上完成他的工作。

假设这是您的英语和法语版本的版本，您可以这样做（在这里小提琴）：

<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一样（例如，使用local Storage/local Storage/cookie"记住"您以前的设置，依此类推）。

我的示例并不是要提供最后一个框架之类的示例，但是应该将其视为一个非常基本的工作示例，可以暂时实现您想要的东西，或者在提供更好的解决方案/答案之前。

相关内容

最新更新

热门标签：