vue menentukan sama ada ia adalah pelayar ie

Vue ialah rangka kerja JavaScript popular yang digunakan secara meluas dalam pembangunan web. Ia menyediakan cara mudah untuk mencipta antara muka hadapan interaktif dengan keserasian merentas pelayar. Walau bagaimanapun, kadangkala anda perlu mengesan jenis pelayar pengguna dalam kod, terutamanya pelayar IE, kerana keserasiannya sering menyebabkan masalah. Artikel ini akan memperkenalkan cara menggunakan Vue untuk menentukan sama ada pengguna menggunakan pelayar IE.

Pertama, kita perlu tahu cara untuk mengesan jenis penyemak imbas pengguna. Dalam penyemak imbas, kita boleh mendapatkan maklumat pelayar melalui harta navigator.userAgent. Ia mengembalikan rentetan yang mengandungi pengilang penyemak imbas, nombor versi, sistem pengendalian dan maklumat lain. Contohnya, dalam IE 11, nilai pulangan navigator.userAgent adalah seperti berikut:

"Mozilla/5.0 (Windows NT 10.0; WOW64; Trident/7.0; AS; rv:11.0) seperti Gecko"

Seperti yang anda lihat, ia mengandungi rentetan Trident/7.0, yang merupakan pengecam pelayar IE.

Jadi, bagaimana untuk mendapatkan nilai navigator.userAgent dalam Vue? Kita boleh menggunakan fungsi cangkuk kitaran hayat Vue yang dibuat atau dipasang untuk mendapatkannya. Kedua-dua fungsi ini dipanggil apabila contoh komponen Vue dibuat atau dipasang ke dalam DOM.

Dalam komponen Vue, kita boleh mendapatkan nilai navigator.userAgent seperti ini:

export default {
  created() {
    const userAgent = navigator.userAgent;
    console.log(userAgent);
  },
};

Coretan kod ini akan mengeluarkan nilai userAgent pelayar pengguna semasa apabila komponen Vue dibuat. Anda boleh mengawalnya dengan Semak nilai pada platform.

Walau bagaimanapun, nilai ini tidak begitu mesra, ia adalah rentetan yang mengandungi banyak maklumat. Oleh itu, kita perlu menghuraikannya untuk menentukan sama ada pengguna semasa menggunakan pelayar IE.

Sebelum menghuraikan, kita perlu memberi perhatian kepada perubahan nilai ejen pengguna pelayar IE. Disebabkan oleh keserasian IE yang lemah, ramai pembangun akan menulis kod khusus untuk menentukan sama ada penyemak imbas adalah IE. Walau bagaimanapun, nilai ejen pengguna pelayar IE boleh diubah suai. Sebagai contoh, dalam IE11, pengguna boleh mengubah suai nilai ejen pengguna melalui Alat Pembangun F12 -> Emulasi -> Rentetan ejen pengguna, yang akan menukar nilai ejen pengguna yang dihantar oleh penyemak imbas ke pelayan. Oleh itu, kaedah yang lebih dipercayai harus digunakan untuk menentukan sama ada penyemak imbas adalah IE.

Kaedah yang paling biasa ialah menggunakan objek ActiveXObject yang unik kepada pelayar IE untuk menilai. ActiveXObject ialah API yang digunakan untuk mencipta objek COM dalam pelayar IE, dan pelayar lain tidak menyokongnya. Oleh itu, jika anda cuba mencipta objek ActiveXObject dalam pelayar bukan IE, ralat akan dilemparkan. Kita boleh menggunakan ciri ini untuk menentukan jenis penyemak imbas.

dilaksanakan dalam komponen Vue seperti berikut:

export default {
  data() {
    return {
      isIE: false,
    };
  },
  created() {
    const isIE = !!window.ActiveXObject || "ActiveXObject" in window;
    this.isIE = isIE;
  },
};

Dalam coretan kod ini, kami memanfaatkan ciri ECMAScript 5. Menggunakan operator in dalam pelayar bukan IE untuk menentukan sama ada ActiveXObject wujud akan mengembalikan false . Pada masa yang sama, kami menggunakan tanda seru berganda !! untuk menukar hasil menjadi nilai boolean untuk disimpan dalam atribut data Vue.

Akhir sekali, dalam komponen Vue, kita boleh melaksanakan logik yang sepadan berdasarkan nilai pembolehubah isIE untuk menentukan sama ada ia adalah pelayar IE. Contohnya, anda boleh menggunakan v-if untuk menyembunyikan atau menunjukkan gaya khusus IE.

<template>
  <div>
    <h1 v-if="!isIE">非 IE 浏览器</h1>
    <h1 v-else>IE 浏览器</h1>
  </div>
</template>

Melalui kaedah di atas, kami boleh mendapatkan maklumat pelayar pengguna dalam kod Vue dan menentukan sama ada pengguna menggunakan pelayar IE. Ini sangat berguna untuk pembangun bahagian hadapan, kerana isu keserasian khusus pelayar IE mesti dipertimbangkan dalam banyak projek.

Atas ialah kandungan terperinci vue menentukan sama ada ia adalah pelayar ie. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!