Apabila pengesanan ciri JavaScript gagal

mata utama

pengesanan ciri JavaScript (ciri ujian yang ingin digunakan oleh pengaturcara) tidak selalu boleh dipercayai. Sebagai contoh, ujian ActiveXObject di Internet Explorer untuk permintaan AJAX, atribut HTML dipetakan ke sifat DOM, andaian mengenai tingkah laku pengguna (seperti mengesan peranti sentuhan), dan lain -lain.
Apabila pengesanan ciri gagal, pengesanan penyemak imbas kadang -kadang diperlukan. Walau bagaimanapun, adalah disyorkan untuk menggunakan ujian objek proprietari dan bukannya maklumat navigator dan menggunakannya untuk mengecualikan pelayar dan bukannya memasukkannya.
Berhati -hati apabila melaksanakan pengesanan penyemak imbas. Sentiasa menganggap bahawa ia konsisten sepenuhnya dengan ujian ciri dan hanya dapatkan pengesanan pelayar jika anda tahu bahawa ciri tidak berfungsi seperti yang diharapkan. Selain itu, sintaks yang digunakan untuk ujian objek dan ciri boleh menjejaskan kadar kejayaan pengesanan, jadi memilih sintaks yang betul adalah penting.

Sekali, pengesanan penyemak imbas adalah kemahiran terbaik dari pengaturcara JavaScript. Jika kita tahu bahawa beberapa ciri berfungsi di IE5 tetapi tidak di Netscape 4, kita akan menguji penyemak imbas dan mengubah suai kod tersebut dengan sewajarnya. Contohnya:

Tetapi ketika saya mula -mula menyertai industri, perlumbaan senjata telah bermula! Vendor menambah nilai tambahan kepada rentetan ejen pengguna, jadi mereka kelihatan seperti pelayar pesaing mereka, dan mereka sendiri. Sebagai contoh, ini adalah Safari 5 untuk Mac:

<code class="language-javascript">if (navigator.userAgent.indexOf('MSIE 5') != -1) {
  // 我们认为此浏览器是 IE5
}</code>

Ini akan sesuai dengan ujian untuk "Safari", "WebKit", dan "KHTML" (asas kod Konqueror yang berasaskan WebKit); Mozilla "" (atas sebab -sebab sejarah, hampir setiap pelayar mendakwa sebagai Mozilla).

<code>Mozilla/5.0 (Macintosh; Intel Mac OS X 10_6_8) AppleWebKit/534.59.10 (KHTML, like Gecko) Version/5.1.9 Safari/534.59.10</code>

Tujuan menambahkan semua nilai ini adalah untuk mengelakkan pengesanan pelayar. Jika skrip mengandaikan bahawa hanya Firefox boleh mengendalikan ciri -ciri tertentu, Safari boleh dikecualikan, walaupun ia mungkin berfungsi. Jangan lupa bahawa pengguna boleh menukar ejen pengguna mereka sendiri - saya digunakan untuk menetapkan penyemak imbas saya untuk mengenali "Googlebot/1.0" supaya saya dapat mengakses apa yang difikirkan oleh pemilik tapak hanya untuk merangkak!

Jadi, dari masa ke masa, pengesanan penyemak imbas semacam ini telah menjadi kekacauan yang mustahil dan sebahagian besarnya tidak digunakan, digantikan oleh pengesanan ciri yang lebih baik.

Pengesanan ciri hanya untuk menguji ciri -ciri yang ingin kami gunakan. Sebagai contoh, jika kita memerlukan

(dapatkan kedudukan elemen relatif kepada viewport), maka adalah penting sama ada penyemak imbas

menyokongnya, bukan penyemak imbas itu; lebih buruk daripada ciri ujian itu sendiri: getBoundingClientRect Pelayar yang tidak menyokong fungsi ini akan mengembalikan jenis "tidak ditentukan", jadi keadaan tidak akan diluluskan. Tanpa menguji skrip dalam mana -mana pelayar tertentu, kita tahu bahawa ia berfungsi dengan betul atau gagal dengan senyap.

atau kita ...?

Tetapi kebenarannya - pengesanan ciri tidak sepenuhnya boleh dipercayai - kadang -kadang ia gagal. Oleh itu mari kita lihat beberapa contoh sekarang dan lihat apa yang boleh kita lakukan untuk menyelesaikan setiap kes.

Objek ActiveX

Mungkin contoh kegagalan pengesanan ciri yang paling terkenal ialah menguji ActiveXObject untuk permintaan Ajax di Internet Explorer.

ActiveX adalah contoh objek yang terikat, dan kepentingan praktikal ialah anda tidak dapat mengetahui sama ada ia disokong sehingga anda cuba menggunakannya . Oleh itu, jika pengguna melumpuhkan ActiveX, kod berikut akan membuang ralat:

<code class="language-javascript">if (navigator.userAgent.indexOf('MSIE 5') != -1) {
  // 我们认为此浏览器是 IE5
}</code>

Untuk memperbaikinya, kita perlu menggunakan pengendalian pengecualian -

cuba instantiate objek, menangkap sebarang kegagalan dan mengendalikannya dengan sewajarnya:

<code>Mozilla/5.0 (Macintosh; Intel Mac OS X 10_6_8) AppleWebKit/534.59.10 (KHTML, like Gecko) Version/5.1.9 Safari/534.59.10</code>

atribut html dipetakan ke atribut DOM

Pemetaan atribut sering digunakan untuk menguji sokongan API yang digunakan dengan sifat HTML5. Sebagai contoh, periksa sama ada elemen dengan

menyokong API draggable dengan mencari sifat draggable: [draggable="true"]

<code class="language-javascript">if (typeof document.documentElement.getBoundingClientRect != "undefined") {
  // 浏览器支持此函数
}</code>

Masalah di sini ialah IE8 atau lebih awal akan memetakan semua sifat HTML secara automatik kepada sifat DOM. Inilah sebabnya

begitu mengelirukan dalam versi lama ini, kerana ia tidak mengembalikan sifat sama sekali, tetapi sifat DOM. ini bermakna jika kita menggunakan elemen yang sudah mempunyai atribut getAttribute:

Kemudian walaupun mereka tidak disokong, IE8 atau lebih awal akan kembali untuk

.

<code class="language-javascript">if (typeof window.ActiveXObject != "undefined") {
  var request = new ActiveXObject("Microsoft.XMLHTTP");
}</code>

Atribut

boleh jadi apa -apa: true ("draggable" in element)

tetapi hasilnya akan sama - IE8 atau lebih awal akan kembali

untuk

.

<code class="language-javascript">if (typeof window.ActiveXObject != "undefined") {
  try {
    var request = new ActiveXObject("Microsoft.XMLHTTP");
  } catch (ex) {
    request = null;
  }
  if (request !== null) {
    //... 我们有一个请求对象
  }
}</code>

Dalam kes ini, penyelesaiannya adalah menggunakan elemen yang tidak mempunyai atribut untuk ujian, cara paling selamat adalah menggunakan elemen yang dicipta: true ("nonsense" in element)

andaian mengenai tingkah laku pengguna

anda mungkin melihat menggunakan kod berikut untuk mengesan peranti sentuh:

<code class="language-javascript">if ("draggable" in element) {
  // 浏览器支持拖放
}</code>

kebanyakan peranti sentuh melaksanakan kelewatan manual sebelum mencetuskan acara klik (biasanya sekitar 300 milisaat), yang harus mengelakkan mengklik elemen sambil mengkliknya. Tetapi ini menjadikan aplikasi itu berasa lembap dan tidak bertindak balas, jadi pemaju kadang -kadang menggunakan ujian ciri ini untuk menjalin acara:

Walau bagaimanapun, keadaan ini berpunca daripada ralat

<code class="language-html"><div draggable="true"> ... </div></code>

- kerana peranti menyokong sentuhan, sentuhan akan digunakan. Tetapi bagaimana dengan komputer riba skrin sentuh? Pengguna mungkin menyentuh skrin atau menggunakan tetikus atau trackpad;

<code class="language-html"><div nonsense="true"> ... </div></code>

Dalam kes ini, penyelesaiannya bukan untuk menguji sokongan acara sama sekali - sebaliknya mengikat

dua peristiwa pada masa yang sama, dan kemudian gunakan untuk mengelakkan sentuhan dari menghasilkan klik:

<code class="language-javascript">if (navigator.userAgent.indexOf('MSIE 5') != -1) {
  // 我们认为此浏览器是 IE5
}</code>

perkara yang tidak berfungsi sama sekali

Mengakui ini menyakitkan, tetapi kadang -kadang apa yang kita tidak perlu menguji bukan ciri - tetapi penyemak imbas - kerana pelayar tertentu mendakwa untuk menyokong sesuatu yang tidak berfungsi. Contoh baru -baru ini ialah setDragImage() dalam Opera 12 (yang merupakan cara untuk menyeret dan menjatuhkan dataTransfer objek).

Ujian ciri gagal di sini kerana Opera 12 mendakwa untuk menyokongnya; Ia tidak berfungsi:

<code>Mozilla/5.0 (Macintosh; Intel Mac OS X 10_6_8) AppleWebKit/534.59.10 (KHTML, like Gecko) Version/5.1.9 Safari/534.59.10</code>

Sekarang, jika anda hanya ingin mencuba untuk menambah imej seretan tersuai dan dengan senang hati menyimpan nilai lalai tanpa sokongan (yang akan berlaku), maka ini mungkin baik -baik saja. Tetapi bagaimana jika aplikasi anda perlu imej tersuai supaya penyemak imbas yang tidak menyokongnya harus menggunakan pelaksanaan yang sama sekali berbeza (iaitu, gunakan JavaScript tersuai untuk melaksanakan semua tingkah laku seret)?

atau bagaimana jika penyemak imbas melaksanakan ciri -ciri tertentu tetapi ada kesilapan rendering yang tidak dapat dielakkan? Kadang -kadang kita tidak mempunyai pilihan tetapi secara eksplisit mengesan pelayar yang bermasalah dan mengecualikannya dari ciri -ciri yang akan dicuba untuk menyokongnya.

jadi masalahnya menjadi - apakah cara paling selamat untuk mencapai pengesanan penyemak imbas?

saya mempunyai dua cadangan:

lebih suka ujian objek proprietari ke atas maklumat navigator.
Gunakan ini untuk mengecualikan pelayar dan bukannya memasukkannya.
Contohnya, anda boleh menggunakan

Pengesanan Objek Opera 12 atau lebih awal, jadi kami boleh menggunakan pengecualian ini untuk menguji sokongan draggable:

window.opera

Lebih baik menggunakan objek proprietari dan bukannya objek standard, kerana apabila pelayar baru dibebaskan, hasil ujian tidak mungkin berubah. Berikut adalah beberapa contoh kegemaran saya:

<code class="language-javascript">if (typeof document.documentElement.getBoundingClientRect != "undefined") {
  // 浏览器支持此函数
}</code>

Ujian objek juga boleh digunakan bersempena dengan ujian ciri

<code class="language-javascript">if (typeof window.ActiveXObject != "undefined") {
  var request = new ActiveXObject("Microsoft.XMLHTTP");
}</code>

untuk menentukan sokongan untuk ciri -ciri tertentu dalam penyemak imbas tertentu, atau dalam kes kecemasan, menentukan keadaan penyemak imbas yang lebih tepat:

Kami perhatikan bahawa rentetan ejen pengguna adalah kekacauan yang tidak boleh dipercayai, tetapi rentetan vendor sebenarnya boleh diramal dan boleh digunakan untuk menguji Chrome atau Safari:

<code class="language-javascript">if (typeof window.ActiveXObject != "undefined") {
  try {
    var request = new ActiveXObject("Microsoft.XMLHTTP");
  } catch (ex) {
    request = null;
  }
  if (request !== null) {
    //... 我们有一个请求对象
  }
}</code>

Peraturan Emas untuk semua ini adalah sangat berhati -hati. Pastikan anda menguji keadaan dalam seberapa banyak penyemak imbas yang mungkin dan berhati-hati mempertimbangkan keserasian mereka

ke hadapan

<code class="language-javascript">if ("draggable" in element) {
  // 浏览器支持拖放
}</code>

-matlamatnya adalah menggunakan syarat pelayar untuk mengecualikan

pelayar kerana sudah ada kesilapan yang diketahui, tidak memasukkannya kerana Ciri -ciri yang diketahui (ini adalah tujuan ujian ciri) Pada dasarnya, selalu menganggap bahawa ujian ciri sepenuhnya selaras dengan - melainkan jika anda tahu bahawa ini tidak berlaku, maka ciri itu akan berfungsi seperti yang diharapkan. Pilih sintaks ujian

Sebelum berakhir, saya ingin menyemak pelbagai jenis sintaks yang boleh kita gunakan untuk ujian objek dan harta. Sebagai contoh, dalam beberapa tahun kebelakangan ini, sintaks berikut telah menjadi biasa:

<code class="language-javascript">if (navigator.userAgent.indexOf('MSIE 5') != -1) {
  // 我们认为此浏览器是 IE5
}</code>

Kami tidak dapat menggunakannya pada masa lalu kerana IE5 dan produk yang serupa akan membuang kesilapan kerana sintaks; tetapi sekarang kita tidak perlu menyokong pelayar ini, yang tidak lagi menjadi masalah.

Pada dasarnya, ia sama seperti yang berikut, tetapi lebih pendek untuk menulis:

<code>Mozilla/5.0 (Macintosh; Intel Mac OS X 10_6_8) AppleWebKit/534.59.10 (KHTML, like Gecko) Version/5.1.9 Safari/534.59.10</code>

Walau bagaimanapun, keadaan ujian biasanya bergantung pada penukaran jenis automatik:

<code class="language-javascript">if (typeof document.documentElement.getBoundingClientRect != "undefined") {
  // 浏览器支持此函数
}</code>

kami menggunakan sintaks ini lebih awal dalam beberapa ujian objek penyemak imbas (mis. ujian), yang selamat kerana bagaimana objek menilai - mana -mana objek atau fungsi yang ditetapkan akan sentiasa dinilai sebagai benar, dan jika tidak ditentukan, ia akan dinilai sebagai palsu.

window.opera tetapi kita mungkin menguji sesuatu yang berkesan mengembalikan rentetan null atau kosong, yang kedua -duanya menilai kepada palsu. Sebagai contoh, atribut

kadang -kadang digunakan untuk mengecualikan IE6:

style.maxWidth

Ia hanya akan menilai benar jika atribut

<code class="language-javascript">if (typeof window.ActiveXObject != "undefined") {
  var request = new ActiveXObject("Microsoft.XMLHTTP");
}</code>

disokong dan maxWidth mempunyai nilai yang ditetapkan pengarang, jadi jika kita menulis ujian seperti ini, ia mungkin gagal:

Peraturan umum ialah: bergantung pada penukaran jenis automatik adalah selamat untuk objek dan fungsi, tetapi tidak semestinya selamat untuk rentetan dan nombor atau nilai yang mungkin null.

<code class="language-javascript">if (typeof window.ActiveXObject != "undefined") {
  try {
    var request = new ActiveXObject("Microsoft.XMLHTTP");
  } catch (ex) {
    request = null;
  }
  if (request !== null) {
    //... 我们有一个请求对象
  }
}</code>

yang dikatakan - jika anda boleh menggunakannya dengan selamat, lakukan kerana ia biasanya lebih cepat dalam pelayar moden (mungkin kerana mereka dioptimumkan untuk jenis keadaan ini).

Untuk maklumat lanjut mengenai ini, lihat: Penukaran Jenis Automatik di Dunia Nyata.

soalan yang sering ditanya mengenai pengesanan ciri JavaScript

Apakah pengesanan ciri JavaScript dan mengapa penting?

Pengesanan ciri JavaScript adalah teknologi yang digunakan oleh pemaju untuk menentukan sama ada pelayar pengguna menyokong ciri atau API tertentu. Ini penting kerana tidak semua pelayar menyokong semua ciri JavaScript. Dengan menggunakan pengesanan ciri, pemaju boleh menyediakan penyelesaian alternatif atau sandaran untuk ciri -ciri yang tidak disokong, memastikan laman web atau aplikasi berjalan dengan betul pada pelayar yang berbeza. Ini meningkatkan pengalaman pengguna dan memastikan keserasian.

Bagaimana pengesanan ciri JavaScript gagal?

Pengesanan ciri JavaScript mungkin gagal kerana beberapa sebab. Sebab yang sama adalah bahawa kod pengesanan ciri dilaksanakan dengan salah. Sebagai contoh, jika kod cek untuk sifat yang tidak wujud dalam objek, ia akan kembali tidak ditentukan, mengakibatkan negatif palsu. Sebab lain boleh menjadi penyemak imbas atau kesilapan, yang boleh menyebabkan pengesanan ciri untuk memberikan hasil yang tidak tepat.

Apakah perbezaan antara pengesanan ciri dan pengesanan penyemak imbas?

Pengesanan ciri melibatkan memeriksa sama ada penyemak imbas pengguna menyokong ciri atau API tertentu, manakala pengesanan penyemak imbas mengiktiraf pelayar dan versi pengguna. Walaupun kedua -dua teknik ini direka untuk memastikan keserasian dan fungsi, pengesanan ciri sering dianggap sebagai amalan yang lebih baik kerana ia memeriksa ciri -ciri secara langsung, dan bukannya menganggap sokongannya berdasarkan jenis atau versi penyemak imbas.

Bagaimana menggunakan JavaScript untuk mengesan peranti mudah alih?

Anda boleh menggunakan atribut navigator.userAgent dalam JavaScript untuk mengesan peranti mudah alih. Harta ini mengembalikan rentetan yang mewakili tajuk ejen pengguna penyemak imbas. Dengan menyemak kata kunci tertentu dalam rentetan ini (seperti "Android", "iPhone", atau "iPad"), anda boleh menentukan sama ada pengguna berada pada peranti mudah alih.

Apa itu Feature.js dan bagaimana ia membantu dengan pengesanan ciri?

Feature.js adalah utiliti JavaScript yang ringan, cepat dan mudah untuk pengesanan ciri. Ia menyediakan API yang mudah digunakan yang membolehkan pemaju menguji sama ada penyemak imbas menyokong ciri-ciri tertentu. Ini membantu menyediakan penyelesaian sandaran atau penyelesaian alternatif untuk ciri -ciri yang tidak disokong, dengan itu meningkatkan keserasian dan fungsi laman web atau aplikasi.

Apa itu Modernizr dan bagaimana ia membantu dengan pengesanan ciri?

Modernizr adalah perpustakaan JavaScript yang membantu pemaju memanfaatkan ciri HTML5 dan CSS3 sambil mengekalkan keserasian dengan pelayar yang lebih tua. Ia menggunakan pengesanan ciri untuk memeriksa sama ada penyemak imbas menyokong ciri -ciri tertentu dan menambah kelas kepada elemen HTML, yang membolehkan anda mencari ciri penyemak imbas tertentu dalam stylesheets atau JavaScript.

Bagaimana menggunakan pakej peranti pengesan-js untuk pengesanan ciri?

Pakej Device-Detector-JS

adalah alat yang berkuasa untuk pengesanan peranti. Ia menghancurkan rentetan ejen pengguna dan mengesan telefon pintar, tablet, desktop, TV dan peranti lain. Ia juga mengesan penyemak imbas, enjin, sistem operasi, dan maklumat berguna yang lain. Anda boleh menggunakan pakej ini untuk menyesuaikan tingkah laku laman web atau aplikasi berdasarkan peranti yang dikesan.

Apakah beberapa amalan terbaik untuk melaksanakan pengesanan ciri?

Beberapa amalan terbaik untuk melaksanakan pengesanan ciri termasuk: Menggunakan perpustakaan yang boleh dipercayai dan diuji seperti modenizr atau feature.js, dengan teliti menguji kod pengesanan ciri anda pada pelayar dan peranti yang berbeza, seperti ciri yang tidak disokong memberikan penyelesaian alternatif atau kejatuhan dan mengelakkan menganggap sokongan ciri berdasarkan jenis atau versi penyemak imbas.

boleh membantu pengesanan membantu meningkatkan prestasi laman web?

Ya, pengesanan ciri dapat membantu meningkatkan prestasi laman web. Dengan mengesan ciri -ciri yang tidak disokong dan menyediakan penyelesaian alternatif atau penyelesaian sandaran, anda boleh menghalang kod yang tidak perlu daripada berjalan di penyemak imbas. Ini mengurangkan masa beban dan meningkatkan prestasi keseluruhan laman web.

Bagaimana memahami ciri terkini yang disokong oleh pelayar yang berbeza?

Sebagai hasil daripada perkembangan pesat pembangunan web, ia boleh mencabar untuk memahami ciri -ciri terkini yang disokong oleh pelayar yang berbeza. Walau bagaimanapun, sumber seperti Mozilla Developer Network (MDN), bolehkah saya menggunakan, dan dokumentasi JavaScript dapat memberikan maklumat terkini mengenai sokongan ciri dalam pelayar yang berbeza.

Atas ialah kandungan terperinci Apabila pengesanan ciri JavaScript gagal. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!