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

📅  最后修改于: 2021-08-30 12:43:05             🧑  作者: Mango

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

该方法通过使用 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.   

                    

    Welcome to the GeeksforGeeks Portal!      You can choose any language using the     buttons above!   

           


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

HTML



  

  

    GeeksforGeeks   

       

    Click on the buttons below to change     the language of the webpage.   

                    

    Welcome to the GeeksforGeeks Portal!      You can choose any language using the     buttons above!   

           

输出: