Ich habe eine Website (Flash) in einem Dutzend Sprachen lokalisiert und möchte abhängig von den Browsereinstellungen des Benutzers automatisch einen Standardwert definieren, um die Schritte für den Zugriff auf den Inhalt zu minimieren.
Zu Ihrer Information, ich kann aufgrund von Proxy-Einschränkungen keine Server-Skripte verwenden. Ich denke, JavaScript oder ActionScript wären geeignet, um das Problem zu lösen.
Fragen:
Was wäre die beste Methode, um das Gebietsschema des Benutzers zu erraten?
Gibt es einfache Klassen / Funktionen, die mir helfen könnten (keine komplexen Lokalisierungspakete)? Insbesondere, um alle möglichen Sprachen auf intelligente Weise in eine kleinere Anzahl (die Übersetzungen, die ich habe) zu zerlegen.
Bis zu welchem Punkt kann ich einer solchen Lösung vertrauen?
Irgendwelche anderen Problemumgehungen oder Vorschläge?
quelle
Antworten:
Der richtige Weg ist, sich den an den Server gesendeten HTTP Accept-Language- Header anzusehen . Diese enthält die geordnete, gewichtete Liste der Sprachen, für die der Benutzer seinen Browser konfiguriert hat.
Leider ist dieser Header nicht zum Lesen in JavaScript verfügbar. Sie erhalten
navigator.language
lediglich Informationen darüber, welche lokalisierte Version des Webbrowsers installiert wurde. Dies ist nicht unbedingt dasselbe wie die bevorzugte (n) Sprache (n) des Benutzers. Auf IE erhalten Sie stattdessensystemLanguage
(Betriebssystem installierte Sprache),browserLanguage
(wielanguage
) unduserLanguage
(vom Benutzer konfigurierte Betriebssystemregion), die alle ähnlich wenig hilfreich sind.Wenn ich mich zwischen diesen Eigenschaften entscheiden müsste, würde ich zuerst schnüffeln
userLanguage
, auflanguage
und erst danach zurückgreifen (wenn diese nicht mit einer verfügbaren Sprache übereinstimmen)browserLanguage
und schließlich schauensystemLanguage
.Wenn Sie ein serverseitiges Skript an einer anderen Stelle im Netz platzieren können, das einfach den Accept-Language-Header liest und ihn als JavaScript-Datei mit dem Header-Wert in der Zeichenfolge wieder ausspuckt, z.
Dann können Sie ein <script src>, das auf diesen externen Dienst verweist, in den HTML-Code aufnehmen und JavaScript verwenden, um den Sprachheader zu analysieren. Ich kenne jedoch keinen vorhandenen Bibliothekscode, da dies fast immer auf der Serverseite erfolgt.
Was auch immer Sie am Ende tun, Sie müssen auf jeden Fall einen Benutzer überschreiben, da dies für manche Menschen immer falsch ist. Oft ist es am einfachsten, die Spracheinstellung in die URL einzufügen (z. B. http: //www.example.com/en/site vs http: //www.example.com/de/site) und den Benutzer klicken zu lassen Verbindungen zwischen den beiden. Manchmal möchten Sie eine einzige URL für beide Sprachversionen. In diesem Fall müssen Sie die Einstellung in Cookies speichern. Dies kann jedoch Benutzeragenten verwirren, die Cookies und Suchmaschinen nicht unterstützen.
quelle
navigator.languages //["en-US", "zh-CN", "ja-JP"]
Dies sollte 2020 bei mindestens 95% der Browser funktionieren.navigator.languages
Laut MDN und caniuse.com ist es jetzt in allen gängigen Browsern verfügbar. Probieren Sie das winzige Navigationssprachenpaket (~ 200 Byte) für den modernsten und abwärtskompatibelsten Ansatz.Unter Chrome und Firefox 32+ enthält navigator.languages eine Reihe von Gebietsschemas in der Reihenfolge der Benutzereinstellungen und ist genauer als navigator.language. Um es jedoch abwärtskompatibel zu machen (Getestetes Chrome / IE / Firefox / Safari), verwenden Sie es Dies:
quelle
function getLang(){ return ( navigator.language || navigator.languages[0] ); }
return navigator.languages[0] || navigator.language;
?return (navigator.languages && navigator.languages.length) ? navigator.languages[0] : navigator.language;
. Andernfalls erhalten Sie eine Ausnahme, wenn sienavigator.languages
undefiniert oder leer ist.const getLang = () => navigator.language || navigator.browserLanguage || ( navigator.languages || [ "en" ] ) [ 0 ]
Dieser Artikel schlägt die folgenden Eigenschaften des Navigatorobjekts des Browsers vor :
navigator.language
(Netscape - Browser-Lokalisierung)navigator.browserLanguag
e (IE-spezifisch - Browser-lokalisierte Sprache)navigator.systemLanguage
(IE-spezifisch - Windows-Betriebssystem - Lokalisierte Sprache)navigator.userLanguage
Wenn Sie diese in eine Javascript-Funktion umwandeln, sollten Sie in den meisten Fällen in der Lage sein, die richtige Sprache zu erraten. Stellen Sie sicher, dass Sie sich ordnungsgemäß verschlechtern. Verwenden Sie daher ein Div, das Ihre Links zur Sprachauswahl enthält, damit der Benutzer dennoch entscheiden kann, ob kein Javascript vorhanden ist oder die Methode nicht funktioniert. Wenn es funktioniert, verstecken Sie einfach das div.
Das einzige Problem dabei auf der Client-Seite ist, dass Sie entweder dienen alle Sprachen für den Client bereitstellen oder warten müssen, bis das Skript ausgeführt und die Sprache erkannt wurde, bevor Sie die richtige Version anfordern. Vielleicht würde das Servieren der beliebtesten Sprachversion als Standard die wenigsten Leute irritieren.
Bearbeiten: Ich würde Iwans Cookie-Vorschlag unterstützen, aber sicherstellen, dass der Benutzer die Sprache später jederzeit ändern kann. Nicht jeder bevorzugt die Sprache, in der sein Browser standardmäßig verwendet wird.
quelle
Durch die Kombination der verschiedenen Möglichkeiten, mit denen Browser die Sprache des Benutzers speichern, erhalten Sie folgende Funktion:
Wir überprüfen zuerst das
navigator.languages
Array auf sein erstes Element.Dann bekommen wir entweder
navigator.userLanguage
odernavigator.language
.Wenn dies fehlschlägt, bekommen wir
navigator.browserLanguage
.Schließlich setzen wir es auf,
'en'
wenn alles andere fehlschlägt.Und hier ist der sexy Einzeiler:
quelle
navigator.userLanguage
(für IE). Sie könnten das hinzufügen, um es zu vervollständigen :)navigator.languages[0] || navigator.userLanguage || navigator.language || navigator.browserLanguage || 'en'
?navigator.languages
kann seinundefined
(navigator.languages || [])[0] || navigator.userLanguage || navigator.language || navigator.browserLanguage || 'en'
Es gibt einen Unterschied zwischen den bevorzugten Sprachen des Benutzers und dem Gebietsschema des Systems / Browsers.
Ein Benutzer kann bevorzugte Sprachen im Browser konfigurieren. Diese werden verwendet
navigator.language(s)
, um Ressourcen von einem Server anzufordern und um Inhalte gemäß einer Liste von Sprachprioritäten anzufordern.Das Gebietsschema des Browsers entscheidet jedoch, wie Nummer, Datum, Uhrzeit und Währung gerendert werden. Diese Einstellung ist wahrscheinlich die Sprache mit dem höchsten Rang, es gibt jedoch keine Garantie. Unter Mac und Linux wird das Gebietsschema vom System unabhängig von den Einstellungen der Benutzersprache festgelegt. Unter Windows kann unter den Sprachen in der Vorzugsliste auf Chrome gewählt werden.
Mithilfe von Intl ( https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl ) können Entwickler das Gebietsschema zum Rendern dieser Elemente überschreiben / festlegen, es gibt jedoch Elemente, die dies tun kann nicht überschrieben werden, wie z. B. das
<input type="date">
Format.Um diese Sprache richtig zu extrahieren, habe ich nur Folgendes gefunden:
(new Intl.NumberFormat()).resolvedOptions().locale
(
Intl.NumberFormat().resolvedOptions().locale
scheint auch zu funktionieren)Dadurch wird eine neue NumberFormat-Instanz für das Standardgebietsschema erstellt und anschließend das Gebietsschema dieser aufgelösten Optionen zurückgelesen.
quelle
Ich habe diesbezüglich ein wenig recherchiert und meine bisherigen Ergebnisse in der folgenden Tabelle zusammengefasst
Die empfohlene Lösung besteht darin, ein serverseitiges Skript zu schreiben, um den
Accept-Language
Header zu analysieren und an den Client zu übergeben, um die Sprache der Website festzulegen. Es ist seltsam, warum der Server benötigt wird, um die Sprachpräferenz des Clients zu erkennen, aber so ist es ab sofort. Es gibt verschiedene andere Hacks, um die Sprache zu erkennen, aber das Lesen desAccept-Language
Headers ist nach meinem Verständnis die empfohlene Lösung.quelle
Sie können auch versuchen, die Sprache aus dem Dokument abzurufen, sollte dies Ihre erste Anlaufstelle sein, und dann auf andere Mittel zurückgreifen, da die JS-Sprache häufig mit der Dokumentensprache übereinstimmen soll.
HTML5:
document.querySelector('html').getAttribute('lang')
Erbe:
document.querySelector('meta[http-equiv=content-language]').getAttribute('content')
Keine echte Quelle ist notwendigerweise 100% zuverlässig, da die Leute einfach die falsche Sprache eingeben können.
Es gibt Spracherkennungsbibliotheken, mit denen Sie die Sprache anhand des Inhalts bestimmen können.
quelle
Ich habe alle Antworten verwendet und eine einzeilige Lösung erstellt:
quelle
Sie sagten, Ihre Website verfügt über Flash. Als weitere Option können Sie die Sprache des Betriebssystems abrufen
flash.system.Capabilities.language
- siehe So ermitteln Sie die Betriebssystemsprache im Browser, um das Gebietsschema des Betriebssystems zu erraten .quelle