IE ブラウザと JavaScript の AngularJS_AngularJS の互換性をテストする-jsチュートリアル-php.cn

IE ブラウザと JavaScript の AngularJS_AngularJS の互換性をテストする

WBOY

リリース： 2016-05-16 15:53:47

オリジナル

1146 人が閲覧しました

ショートバージョン

Angular アプリケーションが IE で動作できることを確認するには、次のことを確認してください。

1. IE7 以前の Polyfill JSON.stringify。ポリフィルには JSON2 または JSON3 を使用できます。

<!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. 接続ポイントのルート要素に id="ng-app" を追加し、ng-app 属性を使用します

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

ログイン後にコピー

3. などのカスタム要素タグは使用できません (代わりに属性バージョン

を使用します)。

4. カスタム要素タグを使用する必要がある場合は、IE8 以前のバージョンを使用できるようにするために次の手順を実行する必要があります。

<!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. style="{{ someCss }}" の代わりに ng-style タグを使用します。それ以降のバージョンは Chrome および Firefox で動作しますが、IE バージョン 11 (執筆時点の最新バージョン) 以下では動作しません。

重要な部分は次のとおりです:

xmlns:ng- 名前空間 - カスタムタグごとに名前空間を指定する必要があります。

document.createElement(yourTagName) - カスタムタグ名を作成します。これは古いバージョンの IE でのみ問題となるため、読み込み条件を指定する必要があります。名前空間がなく、HTML で定義されていないタグはすべて、IE が認識できるように事前に宣言する必要があります。

バージョン情報

IE には、非標準のタグ要素に関する多くの問題があります。これらの問題は 2 つの大きなカテゴリに分類でき、それぞれに独自の解決策があります。

タグ名が my: で始まる場合、XML 名前空間とみなされ、対応する名前空間宣言が必要です

タグに : 記号がなく、標準の HTML タグではない場合は、document.createElement('my-tag') を使用して事前に作成する必要があります。
CSS セレクターを使用してカスタムタグのスタイルを変更する場合は、名前空間があるかどうかに関係なく、document.createElement('my-tag') を使用して事前にタグを作成する必要があります。

良いニュース

良いニュースは、これらの制限は要素のタグ名にのみ適用され、要素の属性名には適用されないということです。したがって、IE では特別な処理は必要ありません:

そうしないとどうなりますか?

HTML の未知のタグ mytag を使用する場合 (my:tag または my-tag の結果は同じです):

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

ログイン後にコピー

は次の DOM を解析する必要があります:

予期される動作は、BODY 要素にテキストを含む mytag 子要素があることです。

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

ログイン後にコピー

ただし、IE ではこれは当てはまりません (上記のリビジョンが含まれていない場合)

IE では、BODY 要素には 3 つの子要素があります:

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

ログイン後にコピー

1、自己終了する mytag。たとえば、自己終了タグ
です。 / はオプションですが、
タグは子要素を持つことができません。一部のテキストは
の兄弟タグとして扱われます。

2、テキストノードテキスト。上記では、これは兄弟タグ

ではなく、mytag の子要素である必要があります。

3. 破損した自己終了 /mytag。 / 文字は要素名に使用できないため、これは壊れた要素です。さらに、このサブクローズド要素は DOM の一部ではなく、DOM の構造を記述するためにのみ使用されます。

CSS スタイルのカスタムタグの名前付け

CSS セレクターがカスタム要素で確実に機能できるようにするには、XML 名前空間に関係なく、document.createElement('my-tag') を使用してカスタム要素の名前を事前に作成する必要があります。

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

ログイン後にコピー