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:
Jaka byłaby najlepsza metoda „odgadnięcia” ustawień regionalnych użytkownika?
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.
Do jakiego momentu mogę ufać takiemu rozwiązaniu?
Wszelkie inne obejścia lub sugestie?
źródło
Odpowiedzi:
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 dostajeszsystemLanguage
(język instalacji systemu operacyjnego),browserLanguage
(taki sam jaklanguage
) iuserLanguage
(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 dolanguage
i dopiero potem (jeśli te nie pasowały do żadnego dostępnego języka), patrząc wbrowserLanguage
końcusystemLanguage
.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 .:
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.
źródło
navigator.languages //["en-US", "zh-CN", "ja-JP"]
Powinna działać w co najmniej 95% przeglądarek w 2020 roku.navigator.languages
, zarówno według MDN, jak i caniuse.com , jest teraz dostępny we wszystkich głównych przeglądarkach - wypróbuj mały (~ 200 bajtów) pakiet języków nawigacyjnych , aby uzyskać najnowocześniejsze i kompatybilne wstecz.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:
źródło
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;
. W przeciwnym razie otrzymasz wyjątek, jeślinavigator.languages
jest niezdefiniowany lub pusty.const getLang = () => navigator.language || navigator.browserLanguage || ( navigator.languages || [ "en" ] ) [ 0 ]
W tym artykule zaproponowano następujące właściwości obiektu nawigatora przeglądarki :
navigator.language
(Netscape - lokalizacja przeglądarki)navigator.browserLanguag
e (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.
źródło
Łącząc wiele sposobów, w jakie przeglądarki używają do przechowywania języka użytkownika, otrzymujesz tę funkcję:
Najpierw sprawdzamy
navigator.languages
tablicę pod kątem pierwszego elementu.Następnie otrzymujemy albo
navigator.userLanguage
albonavigator.language
.Jeśli to się nie powiedzie, otrzymamy
navigator.browserLanguage
.Wreszcie ustawiamy na,
'en'
jeśli wszystko inne zawiedzie.A oto seksowny jednowarstwowy:
źródło
navigator.userLanguage
(dla IE). Możesz to dodać, aby było kompletne :)navigator.languages[0] || navigator.userLanguage || navigator.language || navigator.browserLanguage || 'en'
?navigator.languages
może byćundefined
(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().locale
wydaje 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.
źródło
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-Language
nagłó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 przeczytanieAccept-Language
nagłówka jest zalecanym rozwiązaniem według mojego zrozumienia.źródło
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.
źródło
Użyłem wszystkich odpowiedzi i stworzyłem rozwiązanie jednowierszowe:
źródło
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.źródło