Mengesan penyemak imbas di JavaScript

pengesanan penyemak imbas JavaScript: Penyelesaian yang mudah dan berkesan

Dalam pembangunan laman web, mengesan jenis penyemak imbas pengguna sangat membantu untuk memproses pepijat khusus pelayar, pembaikan keserasian aplikasi atau prestasi pengoptimuman. Walaupun pembangunan moden menganjurkan pengesanan ciri dan bukannya pengesanan pelayar, masih praktikal untuk memahami penyemak imbas yang digunakan oleh pengguna. Artikel ini akan meneroka kaedah JavaScript yang mudah dan berkesan, menggunakan atribut

untuk mengesan pelayar yang berbeza. navigator.userAgent

memahami rentetan useragent

Atribut memberikan maklumat terperinci mengenai penyemak imbas pengguna, sistem operasi dan enjin rendering. Setiap penyemak imbas mempunyai mod pengguna yang unik dan boleh digunakan untuk pengenalpastian.

window.navigator.userAgent contohnya:

Dari ini kita boleh mengekstrak maklumat yang berguna.

<code>Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/110.0.0.0 Safari/537.36</code>

mengesan pelayar yang berbeza

Berikut adalah cara mudah untuk menggunakan JavaScript untuk mengesan penyemak imbas:

kod penjelasan terperinci

<code class="language-javascript">const userAgent = window.navigator.userAgent;
const isEdge = /Edge/.test(userAgent); // 检测Microsoft Edge
const isChrome = /chrome/i.test(userAgent) && !isEdge; // 检测Chrome，排除Edge
const isSafari = /safari/i.test(userAgent) && !isEdge; // 检测Safari，排除Edge
const isMobile = /mobile/i.test(userAgent); // 检测移动设备
const isIEWin7 = /Windows NT 6.1/i.test(userAgent) && /rv:11/i.test(userAgent); // 检测Windows 7上的Internet Explorer 11
const isOldSafari = isSafari && (/Version\/8/i.test(userAgent) || /Version\/9/i.test(userAgent)); // 检测旧版Safari

const isEnabledForBrowser = (isChrome || isSafari || isIEWin7) && !isMobile;</code>

mengesan Microsoft Edge:

1. rentetan useragent pelayar tepi mengandungi "kelebihan".

mengesan Google Chrome:

<code class="language-javascript">const isEdge = /Edge/.test(userAgent);</code>

Kerana kelebihan juga mengandungi "krom", kami mengecualikannya di luar ujian.
2. mengesan safari:

<code class="language-javascript">const isChrome = /chrome/i.test(userAgent) && !isEdge;</code>

Sebab mengapa ini berkesan adalah kerana rentetan Usaragent Safari mengandungi "safari", tetapi kita mengecualikan kelebihan untuk mengelakkan kesalahan.

3. Mengesan peranti mudah alih:

<code class="language-javascript">const isSafari = /safari/i.test(userAgent) && !isEdge;</code>

Penyemak imbas mudah alih biasanya mengandungi "mudah alih" dalam usaragentnya.

mengesan Internet Explorer pada Windows 7:
Usragent Windows 7 mengandungi "Windows NT 6.1", dan IE 11 mengandungi "RV: 11".

<code class="language-javascript">const isMobile = /mobile/i.test(userAgent);</code>

Mengesan versi lama Safari:

5. Pengguna versi lama Safari mengandungi "Versi/8" atau "Versi/9".

<code class="language-javascript">const isIEWin7 = /Windows NT 6.1/i.test(userAgent) && /rv:11/i.test(userAgent);</code>

fungsi membolehkan penyemak imbas tertentu:

6. Ini memastikan bahawa fungsi ini hanya didayakan pada IE pada Chrome, Safari atau Windows 7 tanpa digunakan pada peranti mudah alih.
Contoh kod penuh

<code class="language-javascript">const isOldSafari = isSafari && (/Version\/8/i.test(userAgent) || /Version\/9/i.test(userAgent));</code>

Kesimpulan

Pengguna untuk pengesanan penyemak imbas sangat berguna apabila pengesanan ciri tidak mencukupi. Walau bagaimanapun, adalah lebih baik untuk menggunakan peningkatan dan keanggunan secara beransur -ansur untuk memastikan aplikasi web anda dapat dijalankan secara normal dalam semua pelayar. Melalui kaedah ini, anda boleh melaksanakan penyelesaian tertentu atau pengoptimuman penyemak imbas sambil mengekalkan fleksibiliti aplikasi web. Pernahkah anda menghadapi masalah keserasian penyemak imbas dalam projek ini? Selamat datang untuk berkongsi pendapat anda dalam komen!

Atas ialah kandungan terperinci Mengesan penyemak imbas di JavaScript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!