Cara cek javascript di browser

Saat mempertimbangkan untuk menggunakan string agen pengguna untuk mendeteksi browser mana yang sedang digunakan, langkah pertama Anda adalah mencoba menghindarinya jika memungkinkan. Mulailah dengan mencoba mengidentifikasi mengapa Anda ingin melakukannya

Lihat, atau tanyakan, di forum khusus. Anda tidak mungkin menjadi orang pertama yang menghadapi masalah ini. Juga, para ahli, atau orang-orang dengan sudut pandang lain, dapat memberi Anda ide untuk mengatasi bug tersebut. Jika masalah tampaknya tidak biasa, sebaiknya periksa apakah bug ini telah dilaporkan ke vendor browser melalui sistem pelacakan bug mereka (Mozilla; WebKit; Blink; Opera). Pembuat browser benar-benar memperhatikan laporan bug, dan analisisnya mungkin memberi petunjuk tentang solusi lain untuk bug tersebut

Situs Anda perlu menggunakan fitur Web tertentu yang belum didukung oleh beberapa browser, dan Anda ingin mengirim pengguna tersebut ke situs Web lama dengan lebih sedikit fitur tetapi Anda tahu akan berfungsi. Ini adalah alasan terburuk untuk menggunakan deteksi agen pengguna karena kemungkinan besar pada akhirnya semua browser lain akan menyusul. Selain itu, tidak praktis untuk menguji setiap browser yang kurang populer dan menguji fitur Web tersebut. Anda seharusnya tidak pernah mengendus agen pengguna. Selalu ada alternatif melakukan deteksi fitur sebagai gantinya

Ini biasanya merupakan praktik yang buruk, tetapi ada beberapa kasus di mana hal ini diperlukan. Dalam kasus ini, pertama-tama Anda harus menganalisis situasi Anda untuk memastikan bahwa itu benar-benar diperlukan. Bisakah Anda mencegahnya dengan menambahkan beberapa elemen non-semantik <div> atau <span>? . Juga, pikirkan kembali desain Anda. dapatkah Anda menggunakan peningkatan progresif atau tata letak yang lancar untuk membantu menghilangkan kebutuhan untuk melakukan ini?

Jika Anda ingin menghindari penggunaan deteksi agen pengguna, Anda memiliki opsi

Deteksi fitur adalah saat Anda tidak mencoba mencari tahu browser mana yang merender halaman Anda, tetapi sebaliknya, Anda memeriksa untuk melihat apakah fitur spesifik yang Anda perlukan tersedia. Jika tidak, Anda menggunakan fallback. Dalam kasus yang jarang terjadi ketika perilaku berbeda di antara browser, alih-alih memeriksa string agen pengguna, Anda sebaiknya mengimplementasikan pengujian untuk mendeteksi bagaimana browser mengimplementasikan API dan menentukan cara menggunakannya dari situ. Contoh deteksi fitur adalah sebagai berikut. Pada tahun 2017, dukungan tampilan belakang eksperimental yang tidak ditandai Chrome dalam ekspresi reguler, tetapi tidak ada browser lain yang mendukungnya. Jadi, Anda mungkin berpikir untuk melakukan ini

// This code snippet splits a string in a special notation let splitUpString; if (navigator.userAgent.includes("Chrome")) { // YES! The user is suspected to support look-behind regexps // DO NOT USE /(?<=[A-Z])/. It will cause a syntax error in // browsers that do not support look-behind expressions // because all browsers parse the entire script, including // sections of the code that are never executed. const camelCaseExpression = new RegExp("(?<=[A-Z])"); splitUpString = (str) => String(str).split(camelCaseExpression); } else { // This fallback code is much less performant, but works splitUpString = (str) => str.replace(/[A-Z]/g, "z$1").split(/z(?=[A-Z])/g); } console.log(splitUpString("fooBare")); // ["fooB", "are"] console.log(splitUpString("jQWhy")); // ["jQ", "W", "hy"]

Kode di atas akan membuat beberapa asumsi yang salah. Pertama, diasumsikan bahwa semua string agen pengguna yang menyertakan substring "Chrome" adalah Chrome. String UA terkenal menyesatkan. Kemudian, diasumsikan bahwa fitur lookbehind akan selalu tersedia jika browsernya adalah Chrome. Agen tersebut mungkin Chrome versi lama, dari sebelum dukungan ditambahkan, atau (karena fitur tersebut masih dalam tahap percobaan) bisa jadi versi Chrome yang lebih baru yang menghapusnya. Yang terpenting, diasumsikan tidak ada browser lain yang mendukung fitur tersebut. Dukungan dapat ditambahkan ke browser lain kapan saja, tetapi kode ini akan terus memilih jalur yang lebih rendah

Masalah seperti ini dapat dihindari dengan menguji dukungan fitur itu sendiri

let isLookBehindSupported = false; try { new RegExp("(?<=)"); isLookBehindSupported = true; } catch (err) { // If the agent doesn't support look behinds, the attempted // creation of a RegExp object using that syntax throws and // isLookBehindSupported remains false. } const splitUpString = isLookBehindSupported ? (str) => String(str).split(new RegExp("(?<=[A-Z])")) : (str) => str.replace(/[A-Z]/g, "z$1").split(/z(?=[A-Z])/g); _

Seperti yang ditunjukkan oleh kode di atas, selalu ada cara untuk menguji dukungan browser tanpa mengendus agen pengguna. Tidak pernah ada alasan untuk memeriksa string agen pengguna untuk ini

Terakhir, cuplikan kode di atas menimbulkan masalah kritis dengan pengkodean lintas-browser yang harus selalu diperhitungkan. Jangan sengaja menggunakan API yang Anda uji di browser yang tidak didukung. Ini mungkin terdengar jelas dan sederhana, tetapi terkadang tidak. Misalnya, dalam cuplikan kode di atas, menggunakan lookbehind dalam notasi regexp pendek (misalnya, /reg/igm) akan menyebabkan kesalahan parser di browser yang tidak didukung. Jadi, dalam contoh di atas, Anda akan menggunakan new RegExp("(?