ホームページ >ウェブフロントエンド >jsチュートリアル >IE ブラウザと JavaScript の AngularJS_AngularJS の互換性をテストする
IE ブラウザと JavaScript の AngularJS_AngularJS の互換性をテストする
- WBOYオリジナル
- 2016-05-16 15:53:471156ブラウズ
ショートバージョン
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. cbe1678e5ddae3bab5a303561ac9ed86 などのカスタム要素タグは使用できません (代わりに属性バージョン 08c7689d8bf8fe33141f270e3fd6c1d5 を使用します)。
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 (執筆時点の最新バージョン) 以下では動作しません。 重要な部分は次のとおりです:
- document.createElement(yourTagName) - カスタム タグ名を作成します。これは古いバージョンの IE でのみ問題となるため、読み込み条件を指定する必要があります。名前空間がなく、HTML で定義されていないタグはすべて、IE が認識できるように事前に宣言する必要があります。
IE には、非標準のタグ要素に関する多くの問題があります。これらの問題は 2 つの大きなカテゴリに分類でき、それぞれに独自の解決策があります。
タグ名が my: で始まる場合、XML 名前空間とみなされ、対応する名前空間宣言が必要です60004671f7164bb85fa40ec764aea13c
- タグに : 記号がなく、標準の HTML タグではない場合は、document.createElement('my-tag') を使用して事前に作成する必要があります。
- CSS セレクターを使用してカスタム タグのスタイルを変更する場合は、名前空間があるかどうかに関係なく、document.createElement('my-tag') を使用して事前にタグを作成する必要があります。
良いニュースは、これらの制限は要素のタグ名にのみ適用され、要素の属性名には適用されないということです。したがって、IE では特別な処理は必要ありません: ee9aa6fc82bf3c8d8eeb270a32331a7216b28748ea4df4d9c2150843fecfba68
そうしないとどうなりますか?
HTML の未知のタグ mytag を使用する場合 (my:tag または my-tag の結果は同じです):
<html> <body> <mytag>some text</mytag> </body> </html>
#document
+- HTML
+- BODY
+- mytag
+- #text: some text
#document
+- HTML
+- BODY
+- mytag
+- #text: some text
+- /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>