Testen Sie die Kompatibilität des IE-Browsers mit AngularJS_AngularJS von JavaScript-js-Tutorial-php.cn

Testen Sie die Kompatibilität des IE-Browsers mit AngularJS_AngularJS von JavaScript

WBOY

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

Original

1161 Leute haben es durchsucht

Kurzfassung

Um sicherzustellen, dass Angular-Anwendungen im IE funktionieren, bestätigen Sie bitte:

1. Polyfill JSON.stringify auf IE7 oder früher. Sie können JSON2 oder JSON3 für Polyfills verwenden.

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

Nach dem Login kopieren

2. Fügen Sie id="ng-app" zum Stammelement am Verbindungspunkt hinzu und verwenden Sie das ng-app-Attribut

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

Nach dem Login kopieren

3. Sie können keine benutzerdefinierten Element-Tags wie verwenden (verwenden Sie stattdessen die Attributversion

) oder

4. Wenn Sie benutzerdefinierte Element-Tags verwenden müssen, müssen Sie die folgenden Schritte ausführen, um sicherzustellen, dass IE8 und frühere Versionen verwendet werden können:

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

Nach dem Login kopieren

5. Verwenden Sie das ng-style-Tag anstelle von style="{{ someCss }}". Nachfolgende Versionen funktionieren unter Chrome und Firefox, jedoch nicht unter IE-Versionen <= 11 (die neueste Version zum Zeitpunkt des Schreibens).

Der wichtige Teil ist:

xmlns:ng- namespace – Sie müssen für jedes benutzerdefinierte Tag einen Namespace angeben.
document.createElement(yourTagName) – Erstellen Sie einen benutzerdefinierten Tag-Namen – da dies nur bei älteren IE-Versionen ein Problem darstellt, müssen Sie die Ladebedingungen angeben. Für jedes Tag, das keinen Namespace hat und nicht in HTML definiert ist, müssen Sie es im Voraus deklarieren, damit der IE es erkennt.

Versionsinformationen

IE hat viele Probleme mit nicht standardmäßigen Tag-Elementen. Diese Probleme können in zwei große Kategorien unterteilt werden, von denen jede ihre eigenen Lösungen bietet.

Wenn der Tag-Name mit my: beginnt, wird er als XML-Namespace betrachtet und muss über eine entsprechende Namespace-Deklaration verfügen
Wenn das Tag kein :-Symbol hat, aber kein Standard-HTML-Tag ist, muss es vorab mit document.createElement('my-tag') erstellt werden.
Wenn Sie CSS-Selektoren verwenden möchten, um den Stil eines benutzerdefinierten Tags zu ändern, müssen Sie es im Voraus mit document.createElement('my-tag') erstellen, unabhängig davon, ob es einen Namespace hat oder nicht

Gute Nachrichten

Die gute Nachricht ist, dass diese Einschränkungen nur für Element-Tag-Namen gelten und nicht für Element-Attributnamen. Daher ist im IE keine spezielle Verarbeitung erforderlich:

Was passiert, wenn ich es nicht tue?

Wenn Sie das unbekannte HTML-Tag mytag verwenden (die Ergebnisse von my:tag oder my-tag sind die gleichen):

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

Nach dem Login kopieren

sollte das folgende DOM analysieren:

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

Nach dem Login kopieren

Das erwartete Verhalten besteht darin, dass das BODY-Element ein untergeordnetes mytag-Element mit etwas Text hat.

Aber das ist im IE nicht der Fall (wenn die obige Revision nicht enthalten ist)

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

Nach dem Login kopieren

Im IE hat das BODY-Element drei untergeordnete Elemente:

1, ein selbstschließender Mytag. Zum Beispiel das selbstschließende Tag
. / ist optional, aber das
-Tag darf keine untergeordneten Elemente haben. Der Browser behandelt
einige Textelemente

2, ein Textknoten, etwas Text. Im obigen Beispiel sollte dies ein untergeordnetes Element von mytag sein, kein Geschwister-Tag

3. Ein beschädigtes selbstschließendes /mytag. Dies ist ein fehlerhaftes Element, da /-Zeichen in Elementnamen nicht zulässig sind. Darüber hinaus ist dieses untergeordnete Element nicht Teil des DOM, sondern wird nur zur Beschreibung der Struktur des DOM verwendet.

Benutzerdefinierte Tag-Benennung im CSS-Stil

Um sicherzustellen, dass CSS-Selektoren auf benutzerdefinierten Elementen funktionieren können, muss der Name des benutzerdefinierten Elements im Voraus mit document.createElement('my-tag') erstellt werden, unabhängig vom XML-Namespace.

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

Nach dem Login kopieren