Uji keserasian pelayar IE dengan AngularJS_AngularJS JavaScript-tutorial js-php.cn

Uji keserasian pelayar IE dengan AngularJS_AngularJS JavaScript

WBOY

Lepaskan： 2016-05-16 15:53:47

asal

1161 orang telah melayarinya

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>

Salin selepas log masuk

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>

Salin selepas log masuk

3. Anda tidak boleh menggunakan teg unsur tersuai seperti (gunakan versi atribut

) 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>

Salin selepas log masuk

5. Gunakan teg gaya ng bukannya style="{{ someCss }}". Versi seterusnya akan berfungsi di bawah Chrome dan Firefox tetapi bukan versi IE <= 11 (versi terkini pada masa penulisan).

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 sepadan
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:

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>

Salin selepas log masuk

harus menghuraikan DOM berikut:

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

Salin selepas log masuk

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

Salin selepas log masuk

Dalam IE, elemen BODY mempunyai tiga elemen anak:

1, teg saya yang menutup sendiri. Contohnya, teg penutup sendiri
. / adalah pilihan, tetapi teg
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>

Salin selepas log masuk