Javascript 如何使用纯html、js、jquery构建多语言网站？_Javascript_Jquery_Html_Multilingual

Javascript 如何使用纯html、js、jquery构建多语言网站？

javascript jquery html

Javascript 如何使用纯html、js、jquery构建多语言网站？,javascript,jquery,html,multilingual,Javascript,Jquery,Html,Multilingual,我正在使用html来构建页面。问题是如何构建多语言交换机？语言翻译不是问题，我有条件。但是，我不知道如何通过菜单栏上的语言按钮/下拉列表来切换btw每页？如果有一个现有的示例或模板，那就更好了。提前谢谢。好的。作为对“我的答案”的编辑，请执行以下操作： 1-创建一个名为language的文件夹，并向其中添加2个文件es.json和en.json json文件的结构应相同，但翻译应不同，如下所示： en.json es.json 2-创建一个包含示例div的html页面，并放置两个链接以选择指向步

我正在使用html来构建页面。问题是如何构建多语言交换机？语言翻译不是问题，我有条件。但是，我不知道如何通过菜单栏上的语言按钮/下拉列表来切换btw每页？如果有一个现有的示例或模板，那就更好了。提前谢谢。

好的。作为对“我的答案”的编辑，请执行以下操作：

1-创建一个名为language的文件夹，并向其中添加2个文件es.json和en.json

json文件的结构应相同，但翻译应不同，如下所示：

en.json

es.json

2-创建一个包含示例div的html页面，并放置两个链接以选择指向步骤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以外的onclick事件，就可以在不重新加载的情况下进行即时翻译。这取决于你的情况

由于您是前端新手，我想给您一个工作模板/示例，演示如何使用两种不同语言模拟页面。这至少会给你一个关于如何做的替代方法的想法，至少直到M.Taha完成他关于提供多语言UI的通用前端框架的工作为止

假设和分别是英文版和法文版，您可以像小提琴一样操作：

现在，如果您构建页面的版本，只需在服务器上用指向页面版本的路径替换src-s的值，就可以在iframe中实现。通过在JSFIDLE上进行一点实验，这很有趣，可能会有所帮助，您可以从中取得进展，并寻找正确的方法，例如M.Taha正在尝试更多的JSON文件，使用本地存储/cookie来记住您以前的设置，等等

我的示例并不是要提供一个最终的框架或类似的框架，但它应该更像是一个非常基本的工作示例，可以暂时实现您想要的，或者直到提供更好的解决方案/答案为止。

我相信您到目前为止只使用了HTML。因此，您可以在标记中使用JavaScript和JQuery，在标记中使用CSS，对于服务器端脚本，您需要将它们嵌套在PHP/ASP/JSP/etc页面中。这里有一个多语言JQuery方法的可能解决方案：我可以为您的框架获取模板/示例吗？对不起，对于前端来说，我是个新手。有人能告诉我getLanguage在哪里被调用或将被调用吗？另外，当托管这个时，ajax会生成一个CORS错误，因为数据类型是json。“这有解决办法吗？”阿克塞尔，我知道已经很晚了，但也许其他人会觉得有用。当文件准备就绪时，应加载getLanguage。是的，如果语言json文件不在同一个域中，那么CORS可能会出现，而这个域实际上与翻译无关。作为提示，要么将安全性配置为except requests，要么使用jsonp.@M.Waheed。我曾尝试将安全性配置为允许某些CORS连接，但一直失败——很可能是由于配置不正确。我最终确实使用了jsonp，这很有效：有趣的是，有些人喜欢否决一个有效的例子。。。没有提供一个或甚至一个答案。仅仅因为一个问题太宽泛并不意味着答案也应该被否决，即使它们并不完美。。。尤其是如果它们起作用的话，人们应该给“太宽泛”下定义。问题是否必须与特定代码相关？如果问题太广泛，不同的人可能会有不同的观点。对于那些回答了这个问题的人来说，他们似乎不这么认为。此外，他们中的一些人实际上制定了一些框架来实现这一点。我不知道他们为什么会落选。抱歉。一般来说，在询问代码、目标、可能的依赖关系等时，最好提供更具体的细节，因为其他人也会阅读这些内容，其中一些人会寻求清晰性或特定的适用性。除此之外，我觉得它根本不太宽泛，也不值得投反对票：你只是想要一个基本的例子，这样你就可以在这个基础上进一步工作，仅此而已。我认为它被标记为太宽泛了，因为有很多不同的场景可以看到Xedret的评论，还有很多不同的方法来实现你想要的。

<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>

<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>

<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>