Codigos Web

Detectar el idioma del navegador y redireccionar con javascript

detectar el idioma del navegador y redireccionar con javascript

Si tenemos un sitio web que contiene páginas en diferentes lenguages (en, es, ru…) y deseamos por ejemplo que a un visitante inglés le cargue directamente la página en el idioma inglés automáticamente (www.tuweb.com/en/), lo que tendremos es que detectar el idioma del navegador y redireccionar con javascript.

*Utilizaremos dos funciones javascript:

1.var urlexact=window.location.href; Definimos una variable que contiene la URL completa en la que estamos.

2.IndexOf(“cadena”); que verifica si esta url contiene una cadena determinada.

logo de javascript

1.Detectar idioma y redirección DIRECTA

Para ello muestro el siguiente código, el cuál realizará esta función que comentamos de forma automática, es decir, sin dar una opción al visitante de que elija si cambiar o no hacia otra versión (idioma). En el ejemplo lo haremos para el español (es), inglés (en), chino (ch) y brasileño (po).

  1. document.addEventListener('DOMContentLoaded', function () { // Al cargar el DOM...
  2.  
  3. var ln = x=window.navigator.language||navigator.browserLanguage; // Guardamos en una variable el idioma de nuestro navegador
  4.  
  5. if ((window.location.href.indexOf('/es') >= 0) && (ln == 'es')) { // Si en nuestra url pone "/es/" (si estamos en la versión en español) y el idioma del navegador es español, no hay efecto (return false).
  6. return false;
  7.  
  8. }else if((window.location.href.indexOf('/es') < 0) && (ln == 'es')) {//Si en nuestra url NO pone "/es/" (si NO estamos en la versión en español) pero nuestro navegador es español, redirecciona hacia la versión de españa.
  9.  
  10. window.location.href = '/es/';
  11. }else if ((window.location.href.indexOf('/en') >= 0) && (ln == 'en')) {
  12. return false;
  13.  
  14. }else if ((window.location.href.indexOf('/en') < 0) && (ln == 'en')){
  15. window.location.href = '/en/';//
  16. }else if ((window.location.href.indexOf('/ch') >= 0) && (ln == 'ch')) {
  17. return false;
  18.  
  19. }else if ((window.location.href.indexOf('/ch') < 0) && (ln == 'ch')){
  20. window.location.href = '/ch/';//
  21. } else if ((window.location.href.indexOf('/po') >= 0) && (ln == 'po')) {
  22. return false;
  23.  
  24. }else if ((window.location.href.indexOf('/po') < 0) && (ln == 'po')){
  25. window.location.href = '/po/';//
  26. } else{
  27. return false;
  28. }
  29.  
  30. });

 

1.Detectar idioma y redirección OPCIONAL para el usuario

El siguiente ejemplo muestra como detectar el idioma del navegador y redireccionar con javascript, pero esta vez se le preguntará al usuario si desea cambiar la versión (idioma) o no. Para ello le añadimos la función “confirm(“”); ” de javascript, y además simplificamos un poco el código.

 

  1. document.addEventListener('DOMContentLoaded', function () {
  2.  
  3. var ln = x=window.navigator.language||navigator.browserLanguage;
  4. var urlexact=window.location.href;
  5.  
  6. if ((urlexact.indexOf('/es') >= 0) && (ln == 'es')) {
  7. return false;
  8. }else if((urlexact.indexOf('/es') < 0) && (ln == 'es')) {
  9. confirmar=confirm("¿Quieres cambiar el idioma a español?");
  10. if (confirmar)
  11. urlexact = '/es/';//si esta en esp e va a esp
  12. else
  13. return false;
  14.  
  15. }else if ((urlexact.indexOf('/en') >= 0) && (ln == 'en')) {
  16. return false;
  17. }else if ((urlexact.indexOf('/en') < 0) && (ln == 'en')){
  18. confirmar=confirm("¿Do you want to change to english language?");
  19. if (confirmar)
  20. urlexact = '/en/';//si esta en eng e va a eng
  21. else
  22. return false;
  23.  
  24. }else if ((urlexact.indexOf('/ch') >= 0) && (ln == 'ch')) {
  25. return false;
  26. }else if ((urlexact.indexOf('/ch') < 0) && (ln == 'ch')){
  27. confirmar=confirm("要改变语言,以中国人吗?");
  28. if (confirmar)
  29. urlexact = '/ch/';//
  30. else
  31. return false;
  32.  
  33. } else if ((urlexact.indexOf('/po') >= 0) && (ln == 'po')) {
  34. return false;
  35. }else if ((urlexact.indexOf('/po') < 0) && (ln == 'po')){
  36. confirmar=confirm("¿Você quer mudar a língua para o Brasil?");
  37. if (confirmar)
  38. urlexact = '/po/';
  39. else
  40. return false;
  41.  
  42. } else{
  43. return false;
  44. }
  45. });

No comments