每當您為全球企業開發網站或應用程序時，您還必須關注您的受眾可以理解的語言。例如，英語是一種國際語言，但在世界某些地方，人們聽不懂英語，因為他們說德語、西班牙語等。
但是，如果您觀察過，某些網站會提供更改網站語言的選項。您只需單擊按鈕即可更改整個網站的語言。你有沒有想過這怎么可能？
在這里，我們將學習使用 JavaScript 來切換網頁的語言。
語法
用戶應按照以下語法使用 JavaScript 更改網頁語言。
if (lang == "en") {
element.innerHTML = "content";
} else if (lang == "fr") {
element.innerHTML = "content";
} else if (lang == "de") {
element.innerHTML = "content";
}
登錄后復制
在上面的語法中，我們編寫了 if-else 語句來根據所選的語言更改網頁的內容。用戶需要將內容替換為特定語言的內容。
示例 1
在下面的示例中，我們添加了一些 div 元素內容。每當用戶按下任何按鈕來更改網頁的語言時，我們都會通過將語言作為參數傳遞來調用changeLanguage()函數。在changeLanguage()函數中，我們訪問div元素并根據所選語言更改其內容。
<html>
<body>
<h2>Switching the language of web page using JavaScript</h2>
<div id = "div">Hi How are you! This is written in English.</div><br>
<div id = "languageSwitcher">
<button onclick = "changeLanguage('en')"> English </button>
<button onclick = "changeLanguage('fr')"> French </button>
<button onclick = "changeLanguage('de')"> German </button>
</div>
<script>
// function to switch language of web page
function changeLanguage(lang) {
let element = document.getElementById("div");
if (lang == "en") {
element.innerHTML = "Hi How are you! This is written in English.";
} else if (lang == "fr") {
element.innerHTML = "Bonjour Comment allez-vous! Cela est écrit en fran?ais.";
} else if (lang == "de") {
element.innerHTML = "Hallo Wie geht es dir! Das ist auf Deutsch geschrieben.";
}
}
</script>
</body>
</html>
登錄后復制
示例 2
在下面的示例中，我們創建了一個包含多個元素的網頁。此外，我們還為每個元素賦予了唯一的 id。在 JavaScript 中，我們創建了名為“languageContent”的對象。在對象中，我們將語言存儲為鍵，將內容存儲為值。在內容對象中，我們使用元素 id 作為鍵，并將其特定語言的內容作為值。
在 switchLang() 函數中，我們從 languageContent 對象中訪問特定語言的內容，并替換網頁上所有元素的內容。
<html>
<body>
<h2>Switching the language of web page using JavaScript</h2>
<div id = "text1"> This is a sample content </div>
<div id = "language"> English </div>
<div id = "BrandName"> TutorialsPoint </div>
<div id = "Programming_lang"> JavaScript </div>
<div id = "languageSwitcher">
<button onclick = "swithcLang('en')"> English </button>
<button onclick = "swithcLang('fr')"> French </button>
<button onclick = "swithcLang('es')"> German </button>
</div>
<script>
let languageContent = {
"en": {
"text1": "This is a sample content",
"language": "English",
"BrandName": "TutorialsPoint",
"Programming_lang": "JavaScript",
},
"fr": {
"text1": "Ceci est un contenu d'exemple",
"language": "Fran?ais",
"BrandName": "TutorialsPoint",
"Programming_lang": "JavaScript",
},
"es": {
"text1": "Este es un contenido de ejemplo",
"language": "Espa?ol",
"BrandName": "TutorialsPoint",
"Programming_lang": "JavaScript",
}
}
function swithcLang(lang) {
for (let key in languageContent[lang]) {
document.getElementById(key).innerHTML = languageContent[lang][key];
}
}
</script>
</body>
</html>
登錄后復制
用戶學會了使用 JavaScript 切換網頁語言。在第一個示例中，我們給出了如何在多種語言之間切換的演示。
我們可以將第二個示例用于實時網站。開發人員需要創建一個 JSON 文件來存儲內容，而不是在同一個文件中，因為實時應用程序可能包含大量內容。之后，他們可以使用 for 循環來迭代 JSON 文件的所有元素并更新網頁的內容。
以上就是如何使用JavaScript切換頁面語言？的詳細內容，更多請關注www.92cms.cn其它相關文章！
