it-swarm.com.de

Beste Möglichkeit, das Gebietsschema des Benutzers im Browser zu bestimmen

Ich habe eine Website (Flash) in einem Dutzend Sprachen lokalisiert und möchte einen Standardwert in Abhängigkeit von den Browsereinstellungen des Benutzers automatisch definieren, um die Schritte für den Zugriff auf den Inhalt zu minimieren.

Zu Ihrer Information, ich kann aufgrund von Proxy-Beschränkungen keine Server-Skripte verwenden. Ich denke, JavaScript oder ActionScript sind geeignet, um das Problem zu lösen.

Fragen:

  1. Was wäre die beste Methode, um das Gebietsschema des Benutzers zu erraten?

  2. Gibt es einfache Klassen/Funktionen, die mir helfen könnten (keine komplexen Lokalisierungspakete)? Speziell, um alle möglichen Sprachen auf intelligente Weise in eine kleinere Anzahl (die Übersetzungen, die ich habe) aufzuteilen.

  3. Bis zu welchem ​​Punkt kann ich einer solchen Lösung vertrauen?

  4. Weitere Problemumgehungen oder Vorschläge?

162
Theo.T

Der richtige Weg ist, den an den Server gesendeten HTTP Accept-Language -Header zu betrachten. Dies enthält die geordnete, gewichtete Liste der Sprachen, für die der Benutzer seinen Browser konfiguriert hat.

Leider kann dieser Header nicht in JavaScript gelesen werden. alles was du bekommst ist navigator.language, in dem angegeben wird, welche lokalisierte Version des Webbrowsers installiert wurde. Dies ist nicht unbedingt dasselbe wie die bevorzugte Sprache (n) des Benutzers. Bei IE) erhalten Sie stattdessen systemLanguage (Sprache des installierten Betriebssystems), browserLanguage (wie language) und userLanguage ( benutzerkonfigurierte Betriebssystemregion), die alle ähnlich wenig hilfreich sind.

Wenn ich mich zwischen diesen Eigenschaften entscheiden müsste, würde ich zuerst nach userLanguage schnuppern, dann auf language zurückgreifen und erst danach (wenn diese nicht zu einer verfügbaren Sprache passen) browserLanguage und schließlich systemLanguage.

Wenn Sie ein serverseitiges Skript an einer anderen Stelle im Internet platzieren können, das einfach den Accept-Language-Header liest und ihn als JavaScript-Datei mit dem Header-Wert in der Zeichenfolge zurückspuckt, z.

var acceptLanguage= 'en-gb,en;q=0.7,de;q=0.3';

dann können Sie ein <script src>, das auf diesen externen Dienst verweist, in den HTML-Code einfügen und JavaScript verwenden, um den Sprachheader zu analysieren. Ich kenne jedoch keinen vorhandenen Bibliothekscode, um dies zu tun, da das Parsing von Accept-Language fast immer auf der Serverseite durchgeführt wird.

Was auch immer Sie am Ende tun, Sie brauchen auf jeden Fall eine Benutzerüberschreibung, da es für einige Leute 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.

167
bobince

Unter Chrome und Firefox 32+ enthält navigator.languages ​​ein Array von Gebietsschemas in der Reihenfolge der Benutzereinstellungen und ist genauer als navigator.language, um es jedoch abwärtskompatibel zu machen (Getestet Chrome/IE/Firefox/Safari) verwenden Sie dann Folgendes:

function getLang()
{
 if (navigator.languages != undefined) 
 return navigator.languages[0]; 
 else 
 return navigator.language;
}
64
Fiach Reid

Dieser Artikel schlägt die folgenden Eigenschaften des Objekts navigator des Browsers vor:

  • navigator.language (Netscape - Browser-Lokalisierung)
  • navigator.browserLanguage (IE-spezifisch - Browser-lokalisierte Sprache)
  • navigator.systemLanguage (IE-spezifisch - Windows-Betriebssystem - Lokalisierte Sprache)
  • navigator.userLanguage

Wenn Sie diese in eine JavaScript-Funktion integrieren, sollten Sie in den meisten Fällen die richtige Sprache erraten können. Stellen Sie sicher, dass Sie eine angemessene Degradierung vornehmen. Lassen Sie also einen Div mit den Links zu Ihrer Sprachauswahl erstellen, damit der Benutzer entscheiden kann, ob kein Javascript vorhanden ist oder ob die Methode nicht funktioniert. Wenn es funktioniert, verstecken Sie einfach die div.

Das einzige Problem dabei auf der Client-Seite ist, dass Sie entweder all die Sprachen für den Client bereitstellen oder warten müssen, bis das Skript ausgeführt wurde und die Sprache erkannt hat, bevor Sie das Recht anfordern Ausführung. Vielleicht würde es die wenigsten Leute irritieren, die beliebteste Sprachversion als Standard zu verwenden.

Bearbeiten: Ich würde Ivans Cookie-Vorschlag unterstützen, aber stellen Sie sicher, dass der Benutzer die Sprache später immer noch ändern kann. Nicht jeder bevorzugt die Sprache, die sein Browser standardmäßig verwendet.

40
Phil H

Wenn Sie die verschiedenen Möglichkeiten kombinieren, mit denen Browser die Sprache des Benutzers speichern, erhalten Sie folgende Funktion:

const getNavigatorLanguage = () => {
  if (navigator.languages && navigator.languages.length) {
    return navigator.languages[0];
  } else {
    return navigator.userLanguage || navigator.language || navigator.browserLanguage || 'en';
  }
}

Wir überprüfen zuerst die navigator.languages Array für sein erstes Element.
Dann bekommen wir entweder navigator.userLanguage oder navigator.language.
Wenn dies fehlschlägt, erhalten wir navigator.browserLanguage.
Schließlich setzen wir es auf 'en' wenn alles andere fehlgeschlagen ist.


nd hier ist der sexy Einzeiler:

const getNavigatorLanguage = () => (navigator.languages && navigator.languages.length) ? navigator.languages[0] : navigator.userLanguage || navigator.language || navigator.browserLanguage || 'en';
22
Zenoo

Ich habe diesbezüglich ein bisschen recherchiert und meine bisherigen Ergebnisse in der folgenden Tabelle zusammengefasst

enter image description here

Die empfohlene Lösung besteht darin, ein serverseitiges Skript zu schreiben, um das Accept-Language header & übergeben Sie es an den Client, 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 das jetzt. Es gibt andere verschiedene Hacks, um die Sprache zu erkennen, aber das Lesen des Accept-Language header ist nach meinem Verständnis die empfohlene Lösung.

3
Abhishek V

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 für navigator.language(s) verwendet und beim Anfordern von Ressourcen von einem Server verwendet, um Inhalte gemäß einer Liste von Sprachprioritäten anzufordern.

Das Gebietsschema des Browsers entscheidet jedoch, wie Nummer, Datum, Uhrzeit und Währung dargestellt 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 Spracheinstellungen des Benutzers 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 überschreiben/festlegen, mit dem diese gerendert werden sollen Dinge, aber es gibt Elemente, die nicht überschrieben werden können, wie das Format <input type="date">.

Um diese Sprache richtig zu extrahieren, habe ich nur folgende Möglichkeiten 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.

Sie können auch versuchen, die Sprache aus dem Dokument abzurufen, falls dies Ihre erste Anlaufstelle sein sollte, und dann auf andere Mittel zurückgreifen, da die Benutzer häufig möchten, dass ihre JS-Sprache mit der Dokumentsprache übereinstimmt.

HTML5:

document.querySelector('html').getAttribute('lang')

Erbe:

document.querySelector('meta[http-equiv=content-language]').getAttribute('content')

Keine echte Quelle ist unbedingt 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.

0
jgmjgm