資料結構
網路
關係資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝學
法學如何使用 JavaScript 切換頁面語言？
無論何時您為全球性企業開發網站或應用程式，都必須關注您的受眾能夠理解的語言。例如，英語是一種國際語言，但在世界某些地區，人們並不理解英語，他們說德語、西班牙語等。
但是，如果您觀察過，一些網站提供了更改網站語言的選項。您只需要點選按鈕，就可以更改整個網站的語言。您是否想過這是如何實現的？
在這裡，我們將學習如何使用 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 檔案的所有元素，並更新網頁的內容。
8K+ 閱讀量
