Testez la compatibilité du navigateur IE avec AngularJS_AngularJS de JavaScript-js tutoriel-php.cn

Testez la compatibilité du navigateur IE avec AngularJS_AngularJS de JavaScript

WBOY

Libérer： 2016-05-16 15:53:47

original

1150 Les gens l'ont consulté

Version courte

Pour vous assurer que les applications Angular peuvent fonctionner sur IE, veuillez confirmer :

1. Polyfill JSON.stringify sur IE7 ou version antérieure. Vous pouvez utiliser JSON2 ou JSON3 pour les polyfills.

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

Copier après la connexion

2. Ajoutez id="ng-app" à l'élément racine au point de connexion et utilisez l'attribut ng-app

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

Copier après la connexion

3. Vous ne pouvez pas utiliser de balises d'éléments personnalisées telles que (utilisez plutôt l'attribut version

) ou

4. Si vous devez utiliser des balises d'éléments personnalisées, vous devez suivre les étapes suivantes pour vous assurer qu'IE8 et les versions antérieures peuvent être utilisées :

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

Copier après la connexion

5. Utilisez la balise ng-style au lieu de style="{{ someCss }}". Les versions ultérieures fonctionneront sous Chrome et Firefox mais pas les versions IE <= 11 (la dernière version au moment de la rédaction).

La partie importante est :

xmlns:ng- namespace - Vous devez spécifier un espace de noms pour chaque balise personnalisée.
document.createElement(yourTagName) - Créez un nom de balise personnalisé - puisqu'il s'agit uniquement d'un problème avec les anciennes versions d'IE, vous devez spécifier les conditions de chargement. Pour chaque balise sans espace de noms et non définie en HTML, vous devez la déclarer à l'avance pour qu'IE la reconnaisse.

Informations sur la version

IE a beaucoup de problèmes avec les éléments de balises non standard. Ces problèmes peuvent être divisés en deux grandes catégories, chacune ayant ses propres solutions.

Si le nom de la balise commence par my: alors il sera considéré comme un espace de noms XML et doit avoir une déclaration d'espace de noms correspondante
Si la balise n'a pas de symbole : mais n'est pas une balise HTML standard, elle doit être créée au préalable à l'aide de document.createElement('my-tag').
Si vous envisagez d'utiliser des sélecteurs CSS pour modifier le style d'une balise personnalisée, vous devez la créer à l'avance à l'aide de document.createElement('my-tag'), qu'elle ait ou non un espace de noms

Bonne nouvelle

La bonne nouvelle est que ces restrictions s'appliquent uniquement aux noms de balises d'éléments et non aux noms d'attributs d'éléments. Par conséquent, aucun traitement spécial n'est requis dans IE :

Que se passera-t-il si je ne le fais pas ?

Si vous utilisez la balise HTML inconnue mytag (les résultats de my:tag ou my-tag sont les mêmes) :

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

Copier après la connexion

devrait analyser le DOM suivant :

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

Copier après la connexion

Le comportement attendu est que l'élément BODY a un élément enfant mytag avec du texte.

Mais ce n'est pas le cas dans IE (si la révision ci-dessus n'est pas incluse)

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

Copier après la connexion

Dans IE, l'élément BODY a trois éléments enfants :

1, un mytag à fermeture automatique. Par exemple, la balise à fermeture automatique
. / est facultatif, mais la balise
ne peut pas avoir d'éléments enfants. Le navigateur traite
certains textes
comme trois balises sœurs, tandis que certains textes ne sont pas des éléments enfants.

2, un nœud de texte du texte. Dans ce qui précède, cela devrait être un élément enfant de mytag, pas une balise frère

3. Un /mytag à fermeture automatique corrompu. Il s'agit d'un élément cassé car les caractères / ne sont pas autorisés dans les noms d'éléments. De plus, cet élément sous-fermé ne fait pas partie du DOM, il sert uniquement à décrire la structure du DOM.

Nom des balises personnalisées de style CSS

Pour garantir que les sélecteurs CSS peuvent fonctionner sur des éléments personnalisés, le nom de l'élément personnalisé doit être créé à l'avance à l'aide de document.createElement('my-tag'), quel que soit l'espace de noms 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>

Copier après la connexion