Javascript 如何使用纯 html、js、jquery 构建多语言网站？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/46008760/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
how to build multiple language website using pure html, js, jquery?
提问by Laodao
i am using html to build pages. The problem is how to build multiple language switch? Language translate is not issue, i have the terms. However, I don't know how to switch btw every page through the language button/dropdown list on the menu bar? If there is a existing example or template, that would be even better. Thanks in advance.
我正在使用 html 来构建页面。问题是如何构建多语言切换？语言翻译不是问题，我有条件。但是，我不知道如何通过菜单栏上的语言按钮/下拉列表来切换每个页面？如果有现有的示例或模板，那就更好了。提前致谢。
回答by M. Waheed
ok. as an edit to the my answer, please follow:
好的。作为对我的答案的编辑，请遵循：
1 -create a folder called language and add 2 files to it ( es.json and en.json )
1 -创建一个名为 language 的文件夹并向其中添加 2 个文件（ es.json 和 en.json ）
The json files should be identical in structure but different in translation as below:
json 文件的结构应该相同，但翻译不同，如下所示：
en.json
en.json
{
"date": "Date",
"save": "Save",
"cancel": "Cancel"
}
es.json
es.json
{
"date": "Fecha",
"save": "Salvar",
"cancel": "Cancelar"
}
2- Create an html page containing a sample div and put 2 links to select the language pointing to the js function listed in step 3.
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 -Create 2 java script functions to get/set the selected language:
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- Use the variable language to populate the text.
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>
I believe this answers the question as I have the same concept implemented cross multiple sites.
我相信这回答了这个问题，因为我在多个站点上实现了相同的概念。
Note: You can make instant translation ( without reload ) just by using an onclick event other than document.ready from JQuery. It depends on your scenario.
注意：您只需使用 JQuery 中的 document.ready 以外的 onclick 事件即可进行即时翻译（无需重新加载）。这取决于你的场景。
回答by Yin Cognyto
Since you're new to the front end, I thought of giving you a working template/example of a very basic attempt to simulate a page in 2 different languages using iframes. This is will at least give you an idea on an alternative way on how one can do it, at least until M. Taha finishes his work on the general purpose front end framework that provides multi-language UI.
由于您是前端新手，我想为您提供一个工作模板/示例，说明使用iframes模拟 2 种不同语言的页面的非常基本的尝试。这至少会给你一个关于如何做到这一点的替代方法的想法，至少在 M. Taha 完成他在提供多语言 UI 的通用前端框架上的工作之前。
Assuming thisand thisare your versions of the page in English and French, respectively, you could do it like that (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>
Now if you build the versions of your page and just replace the values of the src-s with the path towards your page versions on the server, you can make it happen, all inside an iframe. With a little experimenting (go play on JSFiddle, it's fun) and maybe help, you can progress from there, and look to make it the right way, like M.Taha is trying to (e.g. more ellaborate JSON files, using local storage / cookies to "remember" your previous settings, and so on).
现在，如果您构建页面的版本，并且只需将src-s的值替换为服务器上页面版本的路径，您就可以在iframe. 通过一些实验（去玩 JSFiddle，这很有趣），也许有帮助，你可以从那里取得进展，并寻找正确的方式，就像 M.Taha 正在尝试的那样（例如，更精巧的 JSON 文件，使用本地存储/ cookie 以“记住”您之前的设置，等等）。
My example is not meant to deliver a final framework or such, but it should be looked at more like a very basic working example that can achieve what you wanted for the time being, or until a better solution/answer is provided.
我的示例并不是要提供最终框架或类似的框架，但它应该更像是一个非常基本的工作示例，可以暂时实现您想要的目标，或者直到提供更好的解决方案/答案为止。
