更改 HTML 页面语言

Question

我想制作一个英文页面，上面有一个可以将语言更改为德语的按钮。我已经阅读了数千篇关于这个主题的文章，但我还没有找到答案。我确定我不想使用 Google 翻译器 API 或任何 API。我想用纯 JS 来实现。我只想问你是怎么做到的？使用一个有很多行的按钮来逐个更改元素的文本： function changeLang () { document.getElementById('someid').innerHTML = "some German text"; ... }

或者用 const transLang { from = "en" to = "de" ...} 来实现？如果您知道如何启动它，请告诉我。

Answer 1

对于“纯 JS”解决方案，换句话说 none 通常的解决方案：

否 Ajax 获取翻译后的页面文本/替换 html
不重定向到可以处理布局不一致的不同页面

一个选项是将翻译存储在每个 div 上并使用 .text() 切换它们。不要将您的翻译编码到您的 javascript 中，因为那样很快就无法维护。

function switchLang(lang)
{
    $("[data-" + lang + "]").text(function(i, e) {
        return $(this).data(lang);
    });
}

switchLang("en");

$(".switchlang").click(function() {
    // change the button caption here, eg a flag
    // UX opinion of whether it should be what it is 
    // or what it will become
    // ie "de" click to make it "de"
    // or "de" it's currently "de", click to change it
    $(this).text($(this).data("lang"));
    
    // switch to other language based on language on the button
    var lang = $(this).data("lang") == "de" ? "en" : "de";
    $(this).data("lang", lang);
    switchLang(lang)
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<span data-de="Um die Nachrichten zu lesen" 
      data-en="To read the news"></span>,&nbsp;
<span data-de="Übersetzungsdienst nicht verfügbar" 
      data-en="click here"></span>
<hr/>
<div data-en="no de translation for this line"></div>
<hr/>
<button class='switchlang' data-lang="en">de</button>

然后您可以轻松添加新语言，而无需更改任何代码（这次使用单独的按钮）

var defaultlang = "en";

function switchLang(lang)
{
    $("[data-" + lang + "]").text(function(i, e) {
        return $(this).data(lang);
    });
}

switchLang("en");

$(".switchlang").click(function() {
    switchLang($(this).data("lang"))
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<span data-de="Um die Nachrichten zu lesen" 
      data-es="Para leer las noticias"
      data-en="To read the news"></span>,&nbsp;
<span data-de="Übersetzungsdienst nicht verfügbar" 
      data-es="haga clic aquí"
      data-en="click here"></span>
<hr/>
<div data-es="no hay traducción para esta línea"
     data-en="no de translation for this line"></div>
<hr/>
<button class='switchlang' data-lang="en">en</button>
<button class='switchlang' data-lang="de">de</button>
<button class='switchlang' data-lang="es">es</button>

您可能更喜欢直接在 HTML 中默认语言，而不是在启动时，例如：

<span data-de="speichern">save</span>

然后在加载时将原件存储在 .data("en") 中。这将删除对您的场景可能很重要的 FOUC（加载页面时的延迟）。

更改 HTML 页面语言

Change HTML Page Language

javascript

html

jquery

translate