Rumah > Artikel > hujung hadapan web > Uji keserasian pelayar IE dengan AngularJS_AngularJS JavaScript

Uji keserasian pelayar IE dengan AngularJS_AngularJS JavaScript

WBOYasal: 2016-05-16 15:53:471086semak imbas

Versi pendek

Untuk memastikan aplikasi Angular boleh berfungsi pada IE sila sahkan:

1. Polyfill JSON.stringify pada IE7 atau lebih awal. Anda boleh menggunakan JSON2 atau JSON3 untuk polyfill.

<!doctype html>
 <html xmlns:ng="http://angularjs.org">
  <head>
   <!--[if lte IE 7]>
    <script src="/path/to/json2.js"></script>
   <![endif]-->
  </head>
  <body>
   ...
  </body>
 </html>

2. Tambahkan id="ng-app" pada elemen akar pada titik sambungan dan gunakan atribut ng-app

<!doctype html>
 <html xmlns:ng="http://angularjs.org" id="ng-app" ng-app="optionalModuleName">
  ...
 </html>

3. Anda tidak boleh menggunakan teg unsur tersuai seperti cbe1678e5ddae3bab5a303561ac9ed86 (gunakan versi atribut 08c7689d8bf8fe33141f270e3fd6c1d5) atau

4 Jika anda mesti menggunakan tag elemen tersuai, maka anda mesti mengambil langkah berikut untuk memastikan bahawa IE8 dan versi terdahulu boleh digunakan:

<!doctype html>
 <html xmlns:ng="http://angularjs.org" id="ng-app" ng-app="optionalModuleName">
  <head>
   <!--[if lte IE 8]>
    <script>
     document.createElement('ng-include');
     document.createElement('ng-pluralize');
     document.createElement('ng-view');
 
     // Optionally these for CSS
     document.createElement('ng:include');
     document.createElement('ng:pluralize');
     document.createElement('ng:view');
    </script>
   <![endif]-->
  </head>
  <body>
   ...
  </body>
 </html>

5. Gunakan teg gaya ng bukannya style="{{ someCss }}". Versi seterusnya akan berfungsi di bawah Chrome dan Firefox tetapi bukan versi IE

Bahagian penting ialah:

xmlns:ng- namespace - Anda perlu menentukan ruang nama untuk setiap teg tersuai.
document.createElement(yourTagName) - Buat nama teg tersuai - memandangkan ini hanya isu dengan versi lama IE, anda perlu menentukan syarat pemuatan. Untuk setiap teg yang tidak mempunyai ruang nama dan tidak ditakrifkan dalam HTML, anda perlu mengisytiharkannya terlebih dahulu untuk IE mengenalinya.

Maklumat versi

IE mempunyai banyak masalah dengan elemen tag bukan standard. Masalah ini boleh dibahagikan kepada dua kategori yang luas, masing-masing mempunyai penyelesaiannya sendiri.

Jika nama teg bermula dengan saya: maka ia akan dianggap sebagai ruang nama XML dan mesti mempunyai pengisytiharan ruang nama yang sepadan60004671f7164bb85fa40ec764aea13c
Jika teg tidak mempunyai simbol : tetapi bukan teg HTML standard, ia mesti dibuat terlebih dahulu menggunakan document.createElement('my-tag').
Jika anda bercadang untuk menggunakan pemilih CSS untuk menukar gaya teg tersuai, anda mesti menciptanya terlebih dahulu menggunakan document.createElement('my-tag') tidak kira sama ada ia mempunyai ruang nama atau tidak

Berita baik

Berita baiknya ialah sekatan ini hanya digunakan pada nama tag elemen dan bukan pada nama atribut elemen. Oleh itu, tiada pemprosesan khas diperlukan dalam IE: ee9aa6fc82bf3c8d8eeb270a32331a7216b28748ea4df4d9c2150843fecfba68

Apa yang akan berlaku jika saya tidak melakukannya?

Jika anda menggunakan mytag tag yang tidak diketahui HTML (hasil my:tag atau my-tag adalah sama):

 
<html>
  <body>
   <mytag>some text</mytag>
  </body>
 </html>

harus menghuraikan DOM berikut:

#document
 +- HTML
   +- BODY
    +- mytag
      +- #text: some text

Tingkah laku yang dijangkakan ialah elemen BODY mempunyai elemen mytag child dengan beberapa teks.

Tetapi ini tidak berlaku dalam IE (jika semakan di atas tidak disertakan)

#document
 +- HTML
   +- BODY
    +- mytag
    +- #text: some text
    +- /mytag

Dalam IE, elemen BODY mempunyai tiga elemen anak:

1, teg saya yang menutup sendiri. Contohnya, teg penutup sendiri 076402276aae5dbec7f672f8f4e5cc81. / adalah pilihan, tetapi teg 0c6dc11e160d3b678d68754cc175188a tidak dibenarkan untuk mempunyai elemen kanak-kanak.

2, nod teks beberapa teks. Dalam perkara di atas, ini sepatutnya elemen kanak-kanak mytag, bukan tag adik beradik

3. Penutupan diri yang rosak /mytag. Ini adalah elemen yang rosak kerana / aksara tidak dibenarkan dalam nama elemen. Selain itu, elemen sub-tertutup ini bukan sebahagian daripada DOM, ia hanya digunakan untuk menerangkan struktur DOM.

penamaan teg tersuai gaya CSS

Untuk memastikan pemilih CSS boleh berfungsi pada elemen tersuai, nama elemen tersuai mesti dibuat terlebih dahulu menggunakan document.createElement('my-tag'), tanpa mengira ruang nama XML.

<html xmlns:ng="needed for ng: namespace">
  <head>
   <!--[if lte IE 8]>
    <script>
     // 需要确认ng-include被正常解析
     document.createElement('ng-include');
 
     // 需求启用CSS引用
     document.createElement('ng:view');
    </script>
   <![endif]-->
   <style>
    ng\:view {
     display: block;
     border: 1px solid red;
    }
 
    ng-include {
     display: block;
     border: 1px solid blue;
    }
   </style>
  </head>
  <body>
   <ng:view></ng:view>
   <ng-include></ng-include>
   ...
  </body>
 </html>

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：Bagaimana untuk melaksanakan komen satu halaman menggunakan Laravel dengan AngularJS dan PHP_AngularJSArtikel seterusnya：Bagaimana untuk melaksanakan komen satu halaman menggunakan Laravel dengan AngularJS dan PHP_AngularJS

Artikel berkaitan

Lihat lagi