如何使用 JavaScript 切换页面的语言？

在本文中，我们将描述根据用户的选择在页面语言之间切换的方法。

该方法通过使用 URL 的哈希片段作为标识符来工作，脚本稍后可以使用该标识符来更改语言。使用 JavaScript 中的window.location.hash属性访问哈希 并且可以稍后检查所需的语言标识符。

对于这种方法，必须遵循以下步骤：

第 1 步：我们定义一个函数，该函数接受作为字符串的语言标识符并将其设置为 URL 的哈希片段。然后我们将使用location.reload()方法重新加载页面。

第 2 步：我们将页面的所有内容存储在一个对象中，以便脚本可以根据语言轻松检索它。

Step 3：接下来我们将检查当前的hash值是否等于我们想要的语言标签，从而从我们上面定义的对象中设置语言的相关内容。

HTML

// Create a function to change the hash 
// value of the page and reload it
function changeLanguage(lang) {
  location.hash = lang;
  location.reload();
}
  
// Define the language reload anchors
var language = {
  eng: {
    welcome:
      "Welcome to the GeeksforGeeks " +
      "Portal! You can choose any " +
      "language using the buttons above!",
  },
  es: {
    welcome:
      "¡Bienvenido al portal GeeksforGeeks! " +
      "¡Puedes elegir cualquier idioma usando " +
      "los botones de arriba!",
  },
  hin: {
    welcome:
      "GeeksforGeeks पोर्टल पर आपका स्वागत है! " +
      "आप ऊपर दिए गए बटन का उपयोग करके किसी भी " +
      "भाषा को चुन सकते हैं!",
  },
};
  
// Check if a hash value exists in the URL
if (window.location.hash) {
  
  // Set the content of the webpage
  // depending on the hash value
  if (window.location.hash == "#es") {
    siteContent.textContent = language.es.welcome;
  } else if (window.location.hash == "#hin") {
    siteContent.textContent = language.hin.welcome;
  }
}

示例：此示例通过显示三个按钮供用户选择任何语言，并在单击按钮时更改语言来演示上述方法。

HTML

  

  
    GeeksforGeeks
  
    
  
    Click on the buttons below to change
    the language of the webpage.
  
  
  
  
    Change to English<
    /button>
  
    Change to Spanish
  
  
    Change to Hindi
  
  
  
  
    Welcome to the GeeksforGeeks Portal! 
    You can choose any language using the
    buttons above!
  
  
  
  
    // Create a function to change
    // the hash value of the page
    function changeLanguage(lang) {
      location.hash = lang;
      location.reload();
    }
  
    // Define the language reload anchors
    var language = {
      eng: {
        welcome: "Welcome to the GeeksforGeeks " +
        "Portal! You can choose any language " + 
        "using the buttons above!"
      },
      es: {
        welcome: "¡Bienvenido al portal GeeksforGeeks! " +
        "¡Puedes elegir cualquier idioma usando " +
        "los botones de arriba!"
      },
      hin: {
        welcome: "GeeksforGeeks पोर्टल पर आपका स्वागत है! " +
        "आप ऊपर दिए गए बटन का उपयोग करके किसी भी " + 
        "भाषा को चुन सकते हैं!"
      }
    };
  
    // Check if a hash value exists in the URL
    if (window.location.hash) {
  
      // Set the content of the webpage 
      // depending on the hash value
      if (window.location.hash == "#es") {
        siteContent.textContent =
          language.es.welcome;
      }
      else if (window.location.hash == "#hin") {
        siteContent.textContent =
          language.hin.welcome;
      }
    }
  

  

输出：