Saya memiliki situs web (Flash) yang dilokalisasi ke dalam selusin bahasa dan saya ingin menetapkan nilai default secara otomatis tergantung pada pengaturan browser pengguna untuk meminimalkan langkah-langkah untuk mengakses konten.
FYI, saya tidak bisa menggunakan server-skrip karena pembatasan proxy, jadi saya kira JavaScript atau ActionScript akan sesuai untuk menyelesaikan masalah.
Pertanyaan:
Apa yang akan menjadi metode terbaik untuk 'menebak' lokal pengguna?
Apakah ada kelas / fungsi sederhana yang ada yang dapat membantu saya (tidak ada bundel pelokalan yang kompleks)? Khusus untuk memecah semua bahasa yang mungkin menjadi jumlah yang lebih kecil (terjemahan yang saya miliki) dengan cara yang cerdas.
Sampai di mana saya bisa mempercayai solusi semacam itu?
Ada solusi atau saran lain?
sumber
Jawaban:
Cara yang tepat adalah dengan melihat tajuk Bahasa Terima HTTP yang dikirim ke server. Ini berisi daftar bahasa yang dipesan dan tertimbang yang telah dikonfigurasikan pengguna untuk browser mereka.
Sayangnya tajuk ini tidak tersedia untuk dibaca di dalam JavaScript; yang Anda dapatkan hanyalah
navigator.language
, yang memberi tahu Anda versi lokal dari browser web yang diinstal. Ini tidak harus sama dengan bahasa pilihan pengguna. Pada IE Anda malah mendapatkansystemLanguage
(bahasa yang diinstal OS),browserLanguage
(sama denganlanguage
) danuserLanguage
(wilayah OS yang dikonfigurasi pengguna), yang semuanya sama-sama tidak membantu.Jika saya harus memilih di antara sifat-sifat itu, saya akan mengendus
userLanguage
terlebih dahulu, kembali kelanguage
dan hanya setelah itu (jika itu tidak cocok dengan bahasa yang tersedia) melihatbrowserLanguage
dan akhirnyasystemLanguage
.Jika Anda dapat menempatkan skrip sisi-server di tempat lain di internet yang cukup membaca header Terima-Bahasa dan meludahkannya kembali sebagai file JavaScript dengan nilai header di string, mis .: .:
maka Anda dapat menyertakan <script src> yang menunjuk pada layanan eksternal dalam HTML, dan menggunakan JavaScript untuk mem-parsing header bahasa. Saya tidak tahu kode perpustakaan yang ada untuk melakukan ini, karena parsing Accept-Language hampir selalu dilakukan di sisi server.
Apa pun yang Anda lakukan pada akhirnya, Anda tentu saja harus menimpa pengguna karena akan selalu menebak salah untuk beberapa orang. Seringkali lebih mudah untuk meletakkan pengaturan bahasa di URL (mis. Http: //www.example.com/en/site vs http: //www.example.com/de/site), dan biarkan pengguna mengklik hubungan antara keduanya. Kadang-kadang Anda memang menginginkan satu URL untuk kedua versi bahasa, dalam hal ini Anda harus menyimpan pengaturan di cookie, tetapi ini dapat membingungkan agen pengguna tanpa dukungan untuk cookie dan mesin pencari.
sumber
navigator.languages //["en-US", "zh-CN", "ja-JP"]
Ini harus bekerja pada setidaknya 95% browser pada tahun 2020.navigator.languages
, menurut MDN dan caniuse.com , sekarang tersedia di semua browser utama - cobalah paket bahasa navigator-bahasa yang kecil (~ 200 byte) untuk pendekatan yang paling modern dan kompatibel dengan mundur.Di Chrome dan Firefox 32+, navigator.languages berisi larik lokal sesuai urutan preferensi pengguna, dan lebih akurat daripada navigator.language, namun untuk membuatnya kompatibel-mundur (Chrome yang diuji / IE / Firefox / Safari), kemudian gunakan ini:
sumber
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;
. Kalau tidak, Anda akan mendapatkan pengecualian jikanavigator.languages
tidak ditentukan atau kosong.const getLang = () => navigator.language || navigator.browserLanguage || ( navigator.languages || [ "en" ] ) [ 0 ]
Artikel ini menyarankan properti objek navigator browser berikut :
navigator.language
(Netscape - Lokalisasi Browser)navigator.browserLanguag
e (Khusus IE - Bahasa yang Dibatalkan Browser)navigator.systemLanguage
(Khusus IE - OS Windows - Bahasa Lokal)navigator.userLanguage
Gulung ini ke dalam fungsi javascript dan Anda harus bisa menebak bahasa yang tepat, dalam sebagian besar keadaan. Pastikan untuk menurunkan dengan anggun, sehingga memiliki div berisi tautan pilihan bahasa Anda, sehingga jika tidak ada javascript atau metode tidak berfungsi, pengguna masih dapat memutuskan. Jika berhasil, sembunyikan div saja.
Satu-satunya masalah dengan melakukan ini di sisi klien adalah bahwa Anda melayani semua bahasa untuk klien, atau Anda harus menunggu sampai skrip berjalan dan mendeteksi bahasa sebelum meminta versi yang tepat. Mungkin menyajikan versi bahasa paling populer sebagai default akan membuat jengkel orang yang paling sedikit.
Sunting: Saya menyarankan saran kuki Ivan, tetapi pastikan pengguna selalu dapat mengubah bahasa nanti; tidak semua orang lebih suka bahasa default browser mereka.
sumber
Menggabungkan berbagai cara yang digunakan browser untuk menyimpan bahasa pengguna, Anda mendapatkan fungsi ini:
Kami pertama-tama memeriksa
navigator.languages
array untuk elemen pertamanya.Lalu kita dapat salah satu
navigator.userLanguage
ataunavigator.language
.Jika gagal kita dapatkan
navigator.browserLanguage
.Akhirnya, kami mengaturnya
'en'
jika semuanya gagal.Dan inilah yang seksi:
sumber
navigator.userLanguage
(untuk IE). Anda bisa menambahkannya agar lengkap :)navigator.languages[0] || navigator.userLanguage || navigator.language || navigator.browserLanguage || 'en'
?navigator.languages
bisaundefined
(navigator.languages || [])[0] || navigator.userLanguage || navigator.language || navigator.browserLanguage || 'en'
Ada perbedaan antara bahasa pilihan pengguna dan lokal sistem / browser.
Seorang pengguna dapat mengonfigurasi bahasa yang disukai di browser, dan ini akan digunakan untuk
navigator.language(s)
, dan digunakan ketika meminta sumber daya dari server, untuk meminta konten sesuai dengan daftar prioritas bahasa.Namun, lokal browser akan memutuskan cara merender nomor, tanggal, waktu dan mata uang. Pengaturan ini kemungkinan merupakan bahasa peringkat tertinggi, tetapi tidak ada jaminan. Di Mac dan Linux, lokal ditentukan oleh sistem terlepas dari preferensi bahasa pengguna. Pada Windows dapat dipilih di antara bahasa-bahasa dalam daftar pilihan di Chrome.
Dengan menggunakan Intl ( https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl ), pengembang dapat mengesampingkan / mengatur lokal yang akan digunakan untuk membuat hal-hal ini, tetapi ada elemen yang tidak dapat diganti, seperti
<input type="date">
format.Untuk mengekstrak bahasa ini dengan benar, satu-satunya cara yang saya temukan adalah:
(new Intl.NumberFormat()).resolvedOptions().locale
(
Intl.NumberFormat().resolvedOptions().locale
tampaknya juga berfungsi)Ini akan membuat instance NumberFormat baru untuk lokal default dan kemudian membaca kembali lokal dari opsi yang diselesaikan.
sumber
Saya melakukan sedikit riset tentang ini & saya telah meringkas temuan saya sejauh ini di bawah tabel
Jadi solusi yang disarankan adalah menulis skrip sisi server untuk mengurai
Accept-Language
header & meneruskannya ke klien untuk mengatur bahasa situs web. Sungguh aneh bahwa mengapa server akan diperlukan untuk mendeteksi preferensi bahasa klien, tetapi begitulah sekarang. Ada berbagai peretasan lain yang tersedia untuk mendeteksi bahasa, tetapi membacaAccept-Language
tajuk adalah solusi yang disarankan sesuai pemahaman saya.sumber
Anda juga dapat mencoba untuk mendapatkan bahasa dari dokumen yang seharusnya menjadi porta panggilan pertama Anda, lalu kembali ke cara lain karena sering kali orang ingin bahasa JS mereka cocok dengan bahasa dokumen.
HTML5:
document.querySelector('html').getAttribute('lang')
Warisan:
document.querySelector('meta[http-equiv=content-language]').getAttribute('content')
Tidak ada sumber nyata yang 100% dapat diandalkan karena orang hanya dapat menggunakan bahasa yang salah.
Ada perpustakaan pendeteksi bahasa yang memungkinkan Anda menentukan bahasa berdasarkan konten.
sumber
Saya menggunakan semua jawaban dan menciptakan solusi baris tunggal:
sumber
Anda mengatakan situs web Anda memiliki Flash, lalu, sebagai opsi lain, Anda bisa mendapatkan bahasa sistem operasi dengan
flash.system.Capabilities.language
- lihat Cara menentukan bahasa OS dalam browser untuk menebak lokal sistem operasi.sumber