En este artículo, describiremos el método para cambiar entre los idiomas de una página según la elección del usuario.
El método funciona utilizando el fragmento hash de la URL como un identificador que puede ser utilizado más tarde por el script para cambiar el idioma. Se accede al hash usando la propiedad window.location.hash en JavaScript y luego se puede verificar el identificador de idioma necesario.
Para este enfoque se deben seguir los siguientes pasos:
Paso 1: definimos una función que acepta el identificador de idioma como una string y lo establece como el fragmento hash de la URL. Luego recargaremos la página usando el método location.reload() .
Paso 2: Almacenamos todo el contenido de la página en un objeto para que el script pueda recuperarlo fácilmente según el idioma.
Paso 3: A continuación, comprobaremos si el valor hash actual es igual a la etiqueta de idioma que queremos y, por lo tanto, estableceremos el contenido relevante del idioma del objeto que hemos definido anteriormente.
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;
}
}
Ejemplo: Este ejemplo demuestra el enfoque anterior mostrando tres botones para que el usuario elija cualquier idioma y cambiando el idioma al hacer clic en el botón.
HTML
<!DOCTYPE html>
<html>
<body>
<h1 style="color: green">
GeeksforGeeks
</h1>
<p>
Click on the buttons below to change
the language of the webpage.
</p>
<!-- Define the buttons that will
change the language of the page
and reload it -->
<button onclick="changeLanguage('eng')">
Change to English<
/button>
<button onclick="changeLanguage('es')">
Change to Spanish
</button>
<button onclick="changeLanguage('hin')">
Change to Hindi
</button>
<!-- Define the content of the page
that would be changed -->
<p id="siteContent">
Welcome to the GeeksforGeeks Portal!
You can choose any language using the
buttons above!
</p>
<script>
// 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;
}
}
</script>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por rohit2sahu y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA