Najlepszy sposób na określenie lokalizacji użytkownika w przeglądarce

Mam witrynę internetową (Flash) zlokalizowaną w kilkunastu językach i chcę automatycznie zdefiniować wartość domyślną w zależności od ustawień przeglądarki użytkownika, aby zminimalizować liczbę kroków związanych z dostępem do treści.

Do twojej wiadomości, nie mogę używać skryptów serwera ze względu na ograniczenia proxy, więc chyba JavaScript lub ActionScript byłyby odpowiednie do rozwiązania problemu.

Pytania:

1. Jaka byłaby najlepsza metoda „odgadnięcia” ustawień regionalnych użytkownika?

2. Czy istnieją jakieś proste klasy / funkcje, które mogłyby mi pomóc (brak złożonych pakietów lokalizacyjnych)? Specjalnie, aby rozbić wszystkie możliwe języki na mniejszą liczbę (tłumaczenia, które mam) w inteligentny sposób.

3. Do jakiego momentu mogę ufać takiemu rozwiązaniu?

4. Wszelkie inne obejścia lub sugestie?

Właściwym sposobem jest sprawdzenie nagłówka HTTP Accept-Language przesłanego do serwera. Zawiera uporządkowaną, ważoną listę języków, które użytkownik skonfigurował w swojej przeglądarce.

Niestety ten nagłówek nie jest dostępny do odczytu w JavaScript; otrzymujesz tylko informację navigator.language, która wersja zlokalizowanej przeglądarki została zainstalowana. Niekoniecznie jest to to samo, co preferowane języki użytkownika. W IE zamiast tego dostajesz systemLanguage(język instalacji systemu operacyjnego), browserLanguage(taki sam jak language) i userLanguage(region systemu operacyjnego skonfigurowany przez użytkownika), które są podobnie nieprzydatne.

Gdybym musiał wybierać między tymi właściwościami, najpierw wąchałem userLanguage, wracając do languagei dopiero potem (jeśli te nie pasowały do ​​żadnego dostępnego języka), patrząc w browserLanguagekońcu systemLanguage.

Jeśli możesz umieścić skrypt po stronie serwera w innym miejscu w sieci, które po prostu odczytuje nagłówek Accept-Language i wyrzuca go z powrotem jako plik JavaScript z wartością nagłówka w ciągu, np .:

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

wtedy możesz dołączyć <skrypt src> wskazujący na tę zewnętrzną usługę w HTML i użyć JavaScript do parsowania nagłówka języka. Nie znam jednak żadnego istniejącego kodu biblioteki, ponieważ parsowanie Accept-Language jest prawie zawsze wykonywane po stronie serwera.

Cokolwiek zrobisz, na pewno potrzebujesz zastąpienia przez użytkownika, ponieważ dla niektórych osób zawsze będzie to błędne odgadnięcie. Często najłatwiej jest umieścić ustawienie języka w adresie URL (np. Http: //www.example.com/en/site vs. http: //www.example.com/de/site) i pozwolić użytkownikowi kliknąć powiązania między nimi. Czasami potrzebujesz jednego adresu URL dla obu wersji językowych, w takim przypadku musisz zapisać to ustawienie w plikach cookie, ale może to dezorientować agentów użytkownika bez obsługi plików cookie i wyszukiwarek.

W przeglądarkach Chrome i Firefox 32+ navigator.languages ​​zawiera szereg ustawień narodowych w kolejności preferencji użytkownika i jest bardziej dokładny niż navigator.language, jednak w celu zapewnienia kompatybilności wstecznej (przetestowany Chrome / IE / Firefox / Safari), a następnie użyj to:

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

W tym artykule zaproponowano następujące właściwości obiektu nawigatora przeglądarki :

• navigator.language (Netscape - lokalizacja przeglądarki)
• navigator.browserLanguage (specyficzny dla IE - język zlokalizowany w przeglądarce)
• navigator.systemLanguage (Dotyczy tylko IE - Windows OS - język zlokalizowany)
• navigator.userLanguage

Rzuć je na funkcję javascript, a w większości przypadków powinieneś odgadnąć właściwy język. Pamiętaj, aby degradować z wdziękiem, więc div powinien zawierać linki do wyboru języka, dzięki czemu jeśli nie ma javascript lub metoda nie działa, użytkownik nadal może zdecydować. Jeśli to działa, po prostu ukryj div.

Jedynym problemem związanym z robieniem tego po stronie klienta jest to, że albo podajesz wszystkie języki klientowi, albo musisz poczekać, aż skrypt się uruchomi i wykryje język, zanim poprosi o odpowiednią wersję. Być może podanie domyślnej najpopularniejszej wersji językowej irytowałoby najmniej osób.

Edycja: poparłbym sugestię Ivana dotyczącą plików cookie, ale upewnij się, że użytkownik zawsze może później zmienić język; nie wszyscy preferują język domyślny dla swojej przeglądarki.

Łącząc wiele sposobów, w jakie przeglądarki używają do przechowywania języka użytkownika, otrzymujesz tę funkcję:

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

Najpierw sprawdzamy navigator.languagestablicę pod kątem pierwszego elementu.
Następnie otrzymujemy albo navigator.userLanguagealbo navigator.language.
Jeśli to się nie powiedzie, otrzymamy navigator.browserLanguage.
Wreszcie ustawiamy na, 'en'jeśli wszystko inne zawiedzie.

A oto seksowny jednowarstwowy:

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

Istnieje różnica między preferowanymi językami użytkownika a ustawieniami systemu / przeglądarki.

Użytkownik może skonfigurować preferowane języki w przeglądarce, które będą używane navigator.language(s)i używane podczas żądania zasobów z serwera w celu żądania treści zgodnie z listą priorytetów językowych.

Jednak ustawienia regionalne przeglądarki decydują o sposobie renderowania liczby, daty, godziny i waluty. To ustawienie jest prawdopodobnie językiem o najwyższym rankingu, ale nie ma gwarancji. W systemach Mac i Linux o lokalizacji decyduje system, niezależnie od preferencji językowych użytkownika. W systemie Windows można wybrać spośród języków z preferowanej listy w Chrome.

Korzystając z Intl ( https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl ), programiści mogą przesłonić / ustawić ustawienia regionalne w celu renderowania tych rzeczy, ale istnieją elementy, które nie można zastąpić, na przykład <input type="date">format.

Aby poprawnie wyodrębnić ten język, jedynym sposobem, jaki znalazłem, jest:

(new Intl.NumberFormat()).resolvedOptions().locale

( Intl.NumberFormat().resolvedOptions().localewydaje się również działać)

Spowoduje to utworzenie nowej instancji NumberFormat dla domyślnych ustawień regionalnych, a następnie odczytanie ustawień regionalnych tych rozwiązanych opcji.

Przeprowadziłem trochę badań na ten temat i podsumowałem dotychczasowe ustalenia w poniższej tabeli

Zalecanym rozwiązaniem jest więc napisanie skryptu po stronie serwera, aby przeanalizować Accept-Languagenagłówek i przekazać go klientowi w celu ustawienia języka witryny. To dziwne, dlaczego serwer byłby potrzebny do wykrycia preferencji językowych klienta, ale tak właśnie jest Obecnie dostępne są inne różne hacki do wykrywania języka, ale przeczytanie Accept-Languagenagłówka jest zalecanym rozwiązaniem według mojego zrozumienia.

Możesz także spróbować pobrać język z dokumentu, który może być pierwszym portem zawinięcia, a następnie powrócić do innych środków, ponieważ często ludzie będą chcieli, aby język JS był zgodny z językiem dokumentu.

HTML5:

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

Dziedzictwo:

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

Żadne prawdziwe źródło niekoniecznie jest w 100% niezawodne, ponieważ ludzie mogą po prostu pisać w niewłaściwym języku.

Istnieją biblioteki do wykrywania języka, które mogą umożliwić określenie języka według zawartości.

Użyłem wszystkich odpowiedzi i stworzyłem rozwiązanie jednowierszowe:

const getLanguage = () => navigator.userLanguage || (navigator.languages && navigator.languages.length && navigator.languages[0]) || navigator.language || navigator.browserLanguage || navigator.systemLanguage || 'en';

console.log(getLanguage());

Powiedziałeś, że Twoja witryna ma Flasha, a następnie, jako kolejną opcję, możesz uzyskać język systemu operacyjnego za pomocą flash.system.Capabilities.language- zobacz Jak określić język systemu operacyjnego w przeglądarce, aby odgadnąć ustawienia regionalne systemu operacyjnego.