javascript - mac - java script tutorial




JavaScript per la rilevazione della preferenza della lingua del browser (18)

Ho cercato di rilevare la preferenza della lingua del browser utilizzando JavaScript.

Se imposto la lingua del browser in IE in Tools>Internet Options>General>Languages , come faccio a leggere questo valore utilizzando JavaScript?

Lo stesso problema per Firefox. Non sono in grado di rilevare le impostazioni per tools>options>content>languages usando navigator.language .

Usando navigator.userLanguage , viene rilevata l'impostazione tramite Start>ControlPanel>RegionalandLanguageOptions>Regional Options .

Ho provato con navigator.browserLanguage e navigator.systemLanguage ma né restituisce il valore per la prima impostazione ( Tools>InternetOptions>General>Languages )

Ho trovato un link che discute questo in dettaglio, ma la domanda rimane senza risposta :(


Aggiornamento dell'anno 2014.

Ora c'è un modo per ottenere Accept-Languages ​​in Firefox e Chrome usando navigator.languages (funziona in Chrome> = 32 e Firefox> = 32)

Inoltre, navigator.language in Firefox di questi anni riflette la lingua preferita dei contenuti, non la lingua dell'interfaccia utente. Ma dal momento che questa nozione deve ancora essere supportata da altri browser, non è molto utile.

Quindi, per ottenere il linguaggio dei contenuti più preferito quando possibile, e utilizzare la lingua dell'interfaccia utente come fallback:

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

DanSingerman ha un'ottima soluzione per questa domanda.

L'unica fonte affidabile per la lingua è nell'intestazione della richiesta HTTP. Quindi è necessario uno script sul lato server per rispondere all'intestazione della richiesta o almeno al campo Accept-Language .

Ecco un semplice server Node.js che dovrebbe essere compatibile con il plugin jQuery di 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');

Ho un trucco che penso usi pochissimo codice ed è abbastanza affidabile.

Inserisci i file del tuo sito in una sottodirectory. SSL nel server e creare collegamenti simbolici a quella sottodirectory in cui sono archiviati i file che indicano le lingue.

Qualcosa come questo:

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

Usa il tuo server web per leggere HTTP_ACCEPT_LANGUAGE e reindirizzare a queste "diverse sottodirectory" in base al valore della lingua che fornisce.

Ora puoi usare Javascript's window.location.href per ottenere il tuo url e usarlo in condizionali per identificare in modo affidabile la lingua preferita.

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

Ho usato la risposta di Hamid per un po ', ma nei casi in cui l'array di lingue è come ["en", "en-GB", "en-US", "fr-FR", "fr", "it -ZA "] restituirà" en ", quando" en-GB "sarebbe una corrispondenza migliore.

Il mio aggiornamento (sotto) restituirà il primo codice di formato lungo, ad esempio "en-GB", altrimenti restituirà il primo codice breve ad esempio "en", altrimenti restituirà 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 risposta di Dan Singerman ha un problema che l'header recuperato deve essere usato subito, a causa della natura asincrona dell'ajax di jQuery. Tuttavia, con il suo google app server, ho scritto quanto segue, in modo tale che l'intestazione sia impostata come parte della configurazione iniziale e possa essere utilizzata in un secondo momento.

<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>

Mi sono imbattuto in questo pezzo di codice per rilevare la lingua del browser nel modulo Angular Translate , che puoi trovare here . Ho leggermente modificato il codice sostituendo angular.isArray con Array.isArray per renderlo indipendente dalla libreria 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());


Non c'è un modo decente per ottenere quell'impostazione, almeno non qualcosa di indipendente dal browser.

Ma il server ha queste informazioni, perché fa parte dell'intestazione della richiesta HTTP (il campo Accept-Language, vedi http://www.w3.org/Protocols/rfc2616/rfc2616-sec14.html#sec14.4 )

Quindi l'unico modo affidabile è ottenere una risposta dal server. Avrai bisogno di qualcosa che gira sul server (come .asp, .jsp, .php, CGI) e che "cosa" può restituire tali informazioni. Buoni esempi qui: http://www.developershome.com/wap/detection/detection.asp?page=readHeader


Non riesco a trovare un singolo riferimento che dichiari che è possibile senza coinvolgere il lato server.

MSDN su:

Da browserLingua:

In Microsoft Internet Explorer 4.0 e versioni precedenti, la proprietà browserLanguage riflette la lingua dell'interfaccia utente del browser installato. Ad esempio, se si installa una versione giapponese di Windows Internet Explorer su un sistema operativo inglese, browserLanguage sarebbe ja.

In Internet Explorer 5 e versioni successive, tuttavia, la proprietà browserLanguage riflette la lingua del sistema operativo indipendentemente dalla versione della lingua installata di Internet Explorer. Tuttavia, se è installata la versione MultiLanguage di Microsoft Windows 2000, la proprietà browserLanguage indica la lingua impostata nei menu e nelle finestre di dialogo correnti del sistema operativo, come indicato nelle Opzioni internazionali del Pannello di controllo. Ad esempio, se si installa una versione giapponese di Internet Explorer 5 su un sistema operativo inglese (Regno Unito), browserLanguage sarebbe en-gb. Se si installa la versione di Windows 2000 MultiLanguage e si imposta la lingua dei menu e delle finestre di dialogo in francese, browserLanguage sarebbe fr, anche se si dispone di una versione giapponese di Internet Explorer.

Nota Questa proprietà non indica la lingua o le lingue impostate dall'utente in Preferenze lingua, che si trova nella finestra di dialogo Opzioni Internet.

Inoltre, sembra che browserLanguage sia deprecato perché IE8 non lo elenca


Per chi è alla ricerca di una soluzione Java Server

Ecco 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();
}

Per quello che vale, la libreria di Universal Language Selector di Wikimedia ha dei vantaggi in questo senso: https://www.mediawiki.org/wiki/Extension:UniversalLanguageSelector

Vedi la funzione getFrequentLanguageList in resources / js / ext.uls.init.js. Link diretto: https://gerrit.wikimedia.org/r/gitweb?p=mediawiki/extensions/UniversalLanguageSelector.git;a=blob;f=resources/js/ext.uls.init.js;hb=HEAD

Dipende comunque dal server o, più specificamente, dall'API MediaWiki. Il motivo per cui lo sto mostrando è che può fornire un buon esempio di ottenere tutte le informazioni utili sulla lingua dell'utente: lingua del browser, Accept-Language, geolocalizzazione (con ottenere informazioni sul paese / lingua dal CLDR) e, naturalmente, preferenze del sito dell'utente.


Se hai il controllo di un backend e stai usando django, l'implementazione di 4 linee dell'idea di Dan è:

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})

quindi in urls.py:

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

e sulla parte anteriore:

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

(devi impostare DEFAULT_LANG in settings.py ovviamente)


Se hai solo bisogno di supportare alcuni browser moderni, ora puoi utilizzare:

navigator.languages

che restituisce una matrice delle preferenze linguistiche dell'utente nell'ordine specificato dall'utente.

A partire da ora (settembre 2014) funziona su: Chrome (v37), Firefox (v32) e Opera (v24)

Ma non su: IE (v11)


Se si utilizza ASP .NET MVC e si desidera ottenere l'intestazione Accepted-Languages da JavaScript, ecco un esempio di soluzione alternativa che non implica alcuna richiesta asincrona.

Nel tuo file .cshtml, archivia l'intestazione in modo sicuro nell'attributo dei dati div:

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

Quindi il tuo codice JavaScript può accedere alle informazioni, ad es. 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>

Ovviamente è possibile utilizzare un approccio simile con altre tecnologie server come altri hanno menzionato.


Se stai sviluppando un'app / estensione di Chrome, utilizza l' API chrome.i18n .

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

ho avuto un approccio diverso, questo potrebbe aiutare qualcuno in futuro:

il cliente desiderava una pagina in cui è possibile scambiare le lingue. avevo bisogno di formattare i numeri con quell'impostazione (non l'impostazione del browser / non con un'impostazione predefinita)

quindi ho impostato un'impostazione iniziale a seconda delle impostazioni di configurazione (i18n)

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

più tardi nello script ho usato una funzione per determinare quale numero di formato ho bisogno

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 : "."}
  }
}

così ho usato la lingua impostata della pagina e come fallback ho usato le impostazioni del browser.

che dovrebbe essere utile anche per scopi di test.

a seconda dei clienti potresti non aver bisogno di quelle impostazioni.


navigator.userLanguage per IE

window.navigator.language per firefox / opera / safari


<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>

Ho solo bisogno del componente principale per le mie esigenze, ma puoi facilmente utilizzare semplicemente la stringa completa. Funziona con le ultime versioni di Chrome, Firefox, Safari e IE10 +.


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

window.navigator.userLanguage è solo IE ed è la lingua impostata nel Pannello di controllo di Windows - Opzioni internazionali e NON lingua del browser, ma si potrebbe supporre che un utente che utilizza una macchina con le impostazioni regionali della finestra impostate su Francia sia probabilmente un utente francese.

navigator.language è FireFox e tutti gli altri browser.

Alcuni codici di lingua: 'it' = italia, 'en-US' = inglese USA, ecc.

Come sottolineato da rcoup e The WebMacheter nei commenti seguenti, questa soluzione alternativa non consente di discriminare tra i dialetti inglesi quando gli utenti visualizzano siti Web in browser diversi da IE.

window.navigator.language (Chrome / FF / Safari) restituisce sempre la lingua del browser e non la lingua preferita del browser, ma: "è abbastanza comune per gli anglofoni (gb, au, nz, ecc.) avere una versione it-it di Firefox / Chrome / Safari." Quindi window.navigator.language restituirà comunque en-US anche se la lingua preferita dall'utente è en-GB .





internationalization