Utilizar el idioma que tiene el usuario configurado en el navegador para presentar el contenido de nuestra web puede ser una buena alternativa sobre todo si es la primera vez que accede a nuestro sitio web o si no lo tenemos identificado. Es por ello que si seguimos esta técnica nos puede servir el saber cómo controlar el cambio de idioma en HTML5. Es decir, saber si el usuario en algún momento ha decidido cambiar el idioma en el que se muestra el navegador.
Posiblemente las veces que el usuario haga esta acción sean realmente pocas, pero no está demás el tener preparada nuestra web para poder actuar en el caso de que se produzca ese cambio.
Lo primero que tenemos que saber es que la propiedad navigator.language es la que nos permite recuperar el idioma que tiene el usuario configurado en su navegador.
De esta manera el siguiente código nos servirá para poder mostrar en pantalla el idioma que tiene el usuario:
<div id="mensaje"></div>
<script>
var mensaje = document.getElementById("mensaje");
mensaje.innerHTML = "El idioma por defecto es " + navigator.language;
</script>
Si lo que queremos hacer ahora es poder controlar el cambio de idioma en HTML5 lo que tendremos es que poder suscribirnos al evento onlanguagechange. Dicho evento lo podremos controlar directamente desde el cuerpo de la página que estemos construyendo. Al evento le asignaremos una función que será la que funcione de controlador de dicho evento.
El código de nuestra página quedaría de la siguiente forma:
<body onlanguagechange="cambioIdioma();">
Ahora solo nos quedará codificar la función cambioIdioma() para poder codificar en ella lo relativo al cambio del idioma que se ha producido. Cabe recordar que el nuevo idioma estará en la misma variable del navegador, es decir en navigator.language. De esta forma podemos mostrarle al usuario el cambio de idioma mediante el siguiente código:
function cambioIdioma(){
mensaje.innerHTML = "Se ha cambiado el idioma del documento a " + navigator.language;
}
De esta manera tan sencilla podemos controlar el cambio de idioma en HTML5 y adecuar el idioma de los textos que mostramos de una forma sencilla.
Aunque en este ejemplo hemos visto cómo podemos trabajar con la propiedad navigator.language y el cambio de idioma gestionado por onlanguagechange. Lo más recomendable para poder gestionar el idioma de un usuario es crearle un perfil y que el mismo usuario pueda gestionar sus preferencias en nuestra web.
