JavaScript para detectar la preferencia de idioma del navegador [duplicar]

var language = window.navigator.userLanguage || window.navigator.language;
alert(language); //works IE/SAFARI/CHROME/FF

window.navigator.userLanguage es solo IE y es el idioma establecido en Panel de Control de Windows - Opciones Regionales y NO el idioma del navegador, pero podría suponer que un usuario que utiliza una máquina con la configuración regional de la ventana establecida en Francia es probablemente un usuario francés.

navigator.language es FireFox y todos los demás navegadores.

Algunas código de idioma: 'it' = italia, 'en-US' = inglés, etc.

Como lo señalan rcoup y El WebMacheter en los comentarios a continuación, este workaround no le permitirá discriminar entre los dialectos del inglés cuando los usuarios están viendo el sitio web en navegadores que no sean IE.

window.navigator.language (Chrome / FF / Safari) devuelve siempre el idioma del navegador y no el idioma preferido del navegador, pero: "es bastante común para los hablantes de inglés (gb, au, nz, etc.) tener una versión en-us de Firefox/Chrome/Safari."Por lo tanto, window.navigator.language volverá en-US incluso si el idioma preferido por el usuario es en-GB.

Actualización del año 2014.

Ahora hay una manera de obtener Accept-Languages en Firefox y Chrome usando navegante.idiomas (funciona en Chrome > = 32 y Firefox >= 32)

También, navegador.language en Firefox estos años refleja el idioma preferido del contenido, no el idioma de la interfaz de usuario. Pero dado que esta noción aún no está soportada por otros navegadores, no es muy útil.

Entonces, para obtener el idioma de contenido más preferido cuando sea posible, y usar la interfaz de usuario el lenguaje como alternativa:

navigator.languages
    ? navigator.languages[0]
    : (navigator.language || navigator.userLanguage)

Me encontré con esta pieza de código para detectar el idioma del navegador en Angular Translate module, que puede encontrar la fuente aquí. Modifiqué ligeramente el código reemplazando angular.isArray con Arreglo.isArray para que sea independiente de la biblioteca Angular.

var getFirstBrowserLanguage = function () {
    var nav = window.navigator,
    browserLanguagePropertyKeys = ['language', 'browserLanguage', 'systemLanguage', 'userLanguage'],
    i,
    language;

    // support for HTML 5.1 "navigator.languages"
    if (Array.isArray(nav.languages)) {
      for (i = 0; i < nav.languages.length; i++) {
        language = nav.languages[i];
        if (language && language.length) {
          return language;
        }
      }
    }

    // support for other well known properties in browsers
    for (i = 0; i < browserLanguagePropertyKeys.length; i++) {
      language = nav[browserLanguagePropertyKeys[i]];
      if (language && language.length) {
        return language;
      }
    }

    return null;
  };

console.log(getFirstBrowserLanguage());

var language = navigator.languages && navigator.languages[0] || // Chrome / Firefox
               navigator.language ||   // All browsers
               navigator.userLanguage; // IE <= 10

console.log(language);

• https://developer.mozilla.org/en-US/docs/Web/API/NavigatorLanguage/languages
• https://developer.mozilla.org/en-US/docs/Web/API/NavigatorLanguage/language

Prueba la plantilla PWA https://github.com/StartPolymer/progressive-web-app-template

<script type="text/javascript">
var lang = window.navigator.languages ? window.navigator.languages[0] : null;
    lang = lang || window.navigator.language || window.navigator.browserLanguage || window.navigator.userLanguage;
if (lang.indexOf('-') !== -1)
    lang = lang.split('-')[0];

if (lang.indexOf('_') !== -1)
    lang = lang.split('_')[0];
</script>

Solo necesitaba el componente primario para mis necesidades, pero puede usar fácilmente la cadena completa. Funciona con la última Chrome, Firefox, Safari y IE10+.

No hay una manera decente de obtener esa configuración, al menos no algo independiente del navegador.

Pero el servidor tiene esa información, porque es parte del encabezado de solicitud HTTP (el campo Accept-Language, véase http://www.w3.org/Protocols/rfc2616/rfc2616-sec14.html#sec14.4 )

Así que la única forma confiable es obtener una respuesta del servidor. Necesitará algo que se ejecute en el servidor (como .áspid, .jsp, .php, CGI) y esa "cosa" puede devolver esa información. Buenos ejemplos aquí: http://www.developershome.com/wap/detection/detection.asp?page=readHeader

navigator.userLanguage para IE

window.navigator.language para firefox/opera / safari

Forma de Javascript:

var language = window.navigator.userLanguage || window.navigator.language;//returns value like 'en-us'

Si está utilizando jQuery.i18n plugin , puede utilizar:

jQuery.i18n.browserLang();//returns value like '"en-US"'

No puedo encontrar una sola referencia que indique que es posible sin involucrar al servidor.

MSDN on:

• navegador. browserLanguage
• navegador. systemLanguage
• navegador. Idioma de usuario

De Browseridioma:

En Microsoft Internet Explorer 4.0 y anteriormente, la propiedad browserLanguage refleja el lenguaje de la instalación interfaz de usuario del navegador. Por ejemplo, si instalar una versión japonesa de Windows Internet Explorer en un Sistema operativo inglés, browserLenguage sería ja.

En Internet Explorer 5 y versiones posteriores, sin embargo, la propiedad browserLanguage refleja el lenguaje de la operación sistema independientemente de la instalación versión lingüística de Internet Explorer. Sin embargo, si Microsoft Windows 2000 Versión multilenguaje está instalado, la propiedad browserLanguage indica el idioma establecido en el funcionamiento sistema menús y diálogos actuales, como en las Opciones Regionales de la Panel de Control. Por ejemplo, si instalar una versión japonesa de Internet Explorer 5 en un inglés (United Reino) sistema operativo, browserLenguage sería en-gb. Si instalar Windows 2000 MultiLenguaje versión y establecer el idioma de la menús y diálogos al francés, browserLenguage sería fr, incluso aunque tienes una versión japonesa de Internet Explorer.

Tenga En Cuenta Esto la propiedad no indica el idioma o idiomas establecidos por el usuario en Preferencias de Idioma, ubicado en el cuadro de diálogo Opciones de Internet.

Además, parece que browserLanguage está en desuso porque IE8 no lo lista

Si está desarrollando una aplicación / extensión de Chrome, utilice el chrome.i18n API .

chrome.i18n.getAcceptLanguages(function(languages) {
  console.log(languages);
  // ["en-AU", "en", "en-US"]
});

DanSingerman tiene una muy buena solución para esta pregunta.

La única fuente confiable para el lenguaje está en el encabezado HTTP-request. Por lo tanto, necesita un script del lado del servidor para responder al encabezado de la solicitud o al menos al campo Accept-Language.

Aquí hay un nodo muy simple.servidor js que debería ser compatible con el complemento jQuery de DanSingermans.

var http = require('http');
http.createServer(function (req, res) {
  res.writeHead(200, {'Content-Type': 'text/plain'});
  res.end(JSON.stringify(req.headers));
}).listen(80,'0.0.0.0');

Por si sirve de algo, la biblioteca Universal del Selector de Idiomas de Wikimedia tiene ganchos para hacer esto: https://www.mediawiki.org/wiki/Extension:UniversalLanguageSelector

Vea la función getFrequentLanguageList en resources/js/ext.uls.init.js . Enlace directo: https://gerrit.wikimedia.org/r/gitweb?p=mediawiki/extensions/UniversalLanguageSelector.git;a=blob;f=resources/js/ext.uls.init.js;hb=HEAD

Todavía depende del servidor, o más específicamente, la API de MediaWiki. La razón por la que lo estoy mostrando es que puede proporcionar un buen ejemplo de cómo obtener toda la información útil sobre el idioma del usuario: idioma del navegador, Idioma de aceptación, geolocalización (con información de país/idioma del CLDR) y, por supuesto, las preferencias del sitio del usuario.

Si solo necesita admitir ciertos navegadores modernos, ahora puede usar:

navigator.languages

Que devuelve una matriz de las preferencias de idioma del usuario en el orden especificado por el usuario.

A partir de ahora (Sep 2014) esto funciona en: Cromo (v37), Firefox (v32) y Opera (v24)

Pero no en: IE (v11)

Tuve el mismo problema, y escribí la siguiente biblioteca de front-end que envuelve el código para múltiples navegadores. No es mucho código, pero es bueno no tener que copiar y pegar el mismo código en varios sitios web.

Get it: acceptedlanguages.js

Úsalo:

<script src="acceptedlanguages.js"></script>
<script type="text/javascript">
  console.log('Accepted Languages:  ' + acceptedlanguages.accepted);
</script>

Siempre devuelve un array, ordenado por las preferencias del usuario. En Safari e IE la matriz es siempre de una sola longitud. En FF y Chrome puede ser más de un idioma.

Acabo de llegar con esto. Combina la nueva sintaxis de desestructuración de JS con algunas operaciones estándar para recuperar el lenguaje y la configuración regional.

var [lang, locale] = (((navigator.userLanguage || navigator.language).replace('-', '_')).toLowerCase()).split('_');

Espero que ayude a alguien

He estado usando la respuesta de Hamid por un tiempo, pero en los casos en que la matriz de idiomas es como ["en", "en-GB", "en-US", "fr-FR", "fr", "en -A"] devolverá "en", cuando "en-GB" sería una mejor coincidencia.

Mi actualización (abajo) devolverá el primer código de formato largo, por ejemplo, "en-GB", de lo contrario devolverá el primer código corto, por ejemplo, "en", de lo contrario devolverá null.

function getFirstBrowserLanguage() {
        var nav = window.navigator,
            browserLanguagePropertyKeys = ['language', 'browserLanguage', 'systemLanguage', 'userLanguage'],
            i,
            language,
            len,
            shortLanguage = null;

        // support for HTML 5.1 "navigator.languages"
        if (Array.isArray(nav.languages)) {
            for (i = 0; i < nav.languages.length; i++) {
                language = nav.languages[i];
                len = language.length;
                if (!shortLanguage && len) {
                    shortLanguage = language;
                }
                if (language && len>2) {
                    return language;
                }
            }
        }

        // support for other well known properties in browsers
        for (i = 0; i < browserLanguagePropertyKeys.length; i++) {
            language = nav[browserLanguagePropertyKeys[i]];
            len = language.length;
            if (!shortLanguage && len) {
                shortLanguage = language;
            }
            if (language && len > 2) {
                return language;
            }
        }

        return shortLanguage;
    }

console.log(getFirstBrowserLanguage());

La respuesta de Dan Singerman tiene un problema que el encabezado obtenido debe usarse de inmediato, debido a la naturaleza asincrónica del ajax de jQuery. Sin embargo, con su servidor de aplicaciones de Google, escribí lo siguiente, de modo que el encabezado se establece como parte de la configuración inicial y se puede utilizar en un momento posterior.

<html>
<head>
<script>

    var bLocale='raw'; // can be used at any other place

    function processHeaders(headers){
        bLocale=headers['Accept-Language'];
        comma=bLocale.indexOf(',');
        if(comma>0) bLocale=bLocale.substring(0, comma);
    }

</script>

<script src="jquery-1.11.0.js"></script>

<script type="application/javascript" src="http://ajaxhttpheaders.appspot.com?callback=processHeaders"></script>

</head>
<body>

<h1 id="bLocale">Should be the browser locale here</h1>

</body>

<script>

    $("#bLocale").text(bLocale);

</script>
</html>

En primer lugar, discúlpenme por mi inglés. Me gustaría compartir mi código, porque funciona y es diferente a los otros dados anwers. En este ejemplo,si habla francés (Francia, Bélgica u otro idioma francés) se le redirige en la página en francés, de lo contrario en la página en inglés, dependiendo de la configuración del navegador :

<script type="text/javascript">
        $(document).ready(function () {
            var userLang = navigator.language || navigator.userLanguage;
            if (userLang.startsWith("fr")) {
                    window.location.href = '../fr/index.html';
                }
            else {
                    window.location.href = '../en/index.html';
                }
            });
    </script>

Si tienes el control de un backend y estás usando django, una implementación de 4 líneas de la idea de Dan es:

def get_browser_lang(request):
if request.META.has_key('HTTP_ACCEPT_LANGUAGE'):
    return JsonResponse({'response': request.META['HTTP_ACCEPT_LANGUAGE']})
else:
    return JsonResponse({'response': settings.DEFAULT_LANG})

Luego en urls.py:

url(r'^browserlang/$', views.get_browser_lang, name='get_browser_lang'),

Y en la parte delantera:

$.get(lg('SERVER') + 'browserlang/', function(data){
    var lang_code = data.response.split(',')[0].split(';')[0].split('-')[0];
});

(tienes que establecer DEFAULT_LANG en settings.py por supuesto)

Basado en la respuesta aquí Accediendo a los encabezados HTTP de la página web en JavaScript Construí el siguiente script para obtener el idioma del navegador:

var req = new XMLHttpRequest();
req.open('GET', document.location, false);
req.send(null);
var headers = req.getAllResponseHeaders().toLowerCase();
var contentLanguage = headers.match( /^content-language\:(.*)$/gm );
if(contentLanguage[0]) {
    return contentLanguage[0].split(":")[1].trim().toUpperCase();
}

Si no desea confiar en un servidor externo y tiene uno propio, puede usar un simple script PHP para lograr el mismo comportamiento que @DanSingerman answer.

LanguageDetector.php :

<?php
$lang = substr($_SERVER['HTTP_ACCEPT_LANGUAGE'], 0, 2);
echo json_encode($lang);
?>

Y simplemente cambie estas líneas desde el script jQuery:

url: "languageDetector.php",
dataType: 'json',
success: function(language) {
    nowDoSomethingWithIt(language);
}

Si está utilizando ASP.NET MVC y desea obtener el encabezado Accepted-Languages de JavaScript, aquí hay un ejemplo de solución alternativa que no implica ninguna solicitud asíncrona.

En su .archivo cshtml, almacena el encabezado de forma segura en el atributo data - attribute de un div:

<div data-languages="@Json.Encode(HttpContext.Current.Request.UserLanguages)"></div>

Entonces su código JavaScript puede acceder a la información, por ejemplo, usando jQuery:

<script type="text/javascript">
$('[data-languages]').each(function () {
    var languages = $(this).data("languages");
    for (var i = 0; i < languages.length; i++) {
        var regex = /[-;]/;
        console.log(languages[i].split(regex)[0]);
    }
});
</script>

Por supuesto, puede utilizar un enfoque similar con otras tecnologías de servidor como otros han mencionado.

Para quienes buscan una solución de servidor Java

Aquí está RESTEasy

@GET
@Path("/preference-language")
@Consumes({"application/json", "application/xml"})
@Produces({"application/json", "application/xml"})
public Response getUserLanguagePreference(@Context HttpHeaders headers) {
    return Response.status(200)
            .entity(headers.getAcceptableLanguages().get(0))
            .build();
}

Tenía un enfoque diferente, esto podría ayudar a alguien en el futuro:

El cliente quería una página donde se puede intercambiar idiomas. necesitaba formatear los números por esa configuración (no la configuración del navegador / no por ninguna configuración predefinida)

Así que establezco una configuración inicial dependiendo de la configuración (i18n)

$clang = $this->Session->read('Config.language');
echo "<script type='text/javascript'>var clang = '$clang'</script>";

Más adelante en el script utilicé una función para determinar qué numberformating necesito

function getLangsettings(){
  if(typeof clang === 'undefined') clang = navigator.language;
  //console.log(clang);
  switch(clang){
    case 'de':
    case 'de-de':
        return {precision : 2, thousand : ".", decimal : ","}
    case 'en':
    case 'en-gb':
    default:
        return {precision : 2, thousand : ",", decimal : "."}
  }
}

Así que usé el idioma establecido de la página y como alternativa utiliza la configuración del navegador.

Que también debería ser útil para fines de prueba.

Dependiendo de sus clientes, es posible que no necesite esa configuración.

Tengo un hack que creo que usa muy poco código y es bastante confiable.

Ponga los archivos de su sitio en un subdirectorio. SSL en su servidor y crear enlaces simbólicos a ese subdirectorio donde se almacenan los archivos que indican sus idiomas.

Algo como esto:

ln -s /var/www/yourhtml /var/www/en
ln -s /var/www/yourhtml /var/www/sp
ln -s /var/www/yourhtml /var/www/it

Utilice su servidor web para leer HTTP_ACCEPT_LANGUAGE y redirigir a estos "diferentes subdirectorios" de acuerdo con el valor de idioma que proporciona.

Ahora puedes usar Javascript ventana.ubicación.href para obtener su url y usarla en condicionales para identificar de manera confiable el idioma preferido.

url_string = window.location.href;
if (url_string = "http://yoursite.com/it/index.html") {
    document.getElementById("page-wrapper").className = "italian";
}