Maison >interface Web >js tutoriel >Testez la compatibilité du navigateur IE avec AngularJS_AngularJS de JavaScript

Testez la compatibilité du navigateur IE avec AngularJS_AngularJS de JavaScript

WBOYoriginal: 2016-05-16 15:53:471151parcourir

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>

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>

3. Vous ne pouvez pas utiliser de balises d'éléments personnalisées telles que cbe1678e5ddae3bab5a303561ac9ed86 (utilisez plutôt l'attribut version 08c7689d8bf8fe33141f270e3fd6c1d5) 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>

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

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 correspondante60004671f7164bb85fa40ec764aea13c
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 : ee9aa6fc82bf3c8d8eeb270a32331a7216b28748ea4df4d9c2150843fecfba68
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>

devrait analyser le DOM suivant :

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

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

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

1, un mytag à fermeture automatique. Par exemple, la balise à fermeture automatique 076402276aae5dbec7f672f8f4e5cc81. / est facultatif, mais la balise 0c6dc11e160d3b678d68754cc175188a ne peut pas avoir d'éléments enfants. Le navigateur traite 0c6dc11e160d3b678d68754cc175188acertains textes0b9f73f8e206867bd1f5dc5957dbcb38 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>

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Comment implémenter des commentaires d'une seule page à l'aide de Laravel avec AngularJS et PHP_AngularJSArticle suivant：Comment implémenter des commentaires d'une seule page à l'aide de Laravel avec AngularJS et PHP_AngularJS

Articles Liés

Voir plus