Heim >Web-Frontend >js-Tutorial >Testen Sie die Kompatibilität des IE-Browsers mit AngularJS_AngularJS von JavaScript

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

WBOYOriginal: 2016-05-16 15:53:471159Durchsuche

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>

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>

3. Sie können keine benutzerdefinierten Element-Tags wie cbe1678e5ddae3bab5a303561ac9ed86 verwenden (verwenden Sie stattdessen die Attributversion 08c7689d8bf8fe33141f270e3fd6c1d5) 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>

5. Verwenden Sie das ng-style-Tag anstelle von style="{{ someCss }}". Nachfolgende Versionen funktionieren unter Chrome und Firefox, jedoch nicht unter IE-Versionen

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ügen60004671f7164bb85fa40ec764aea13c
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: ee9aa6fc82bf3c8d8eeb270a32331a7216b28748ea4df4d9c2150843fecfba68
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>

sollte das folgende DOM analysieren:

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

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

Im IE hat das BODY-Element drei untergeordnete Elemente:

1, ein selbstschließender Mytag. Zum Beispiel das selbstschließende Tag 076402276aae5dbec7f672f8f4e5cc81. / ist optional, aber das 0c6dc11e160d3b678d68754cc175188a-Tag darf keine untergeordneten Elemente haben. Der Browser behandelt 0c6dc11e160d3b678d68754cc175188aeinige Textelemente0b9f73f8e206867bd1f5dc5957dbcb38

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>

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：So implementieren Sie einseitige Kommentare mit Laravel mit AngularJS und PHP_AngularJSNächster Artikel：So implementieren Sie einseitige Kommentare mit Laravel mit AngularJS und PHP_AngularJS

In Verbindung stehende Artikel

Mehr sehen